Search code examples
cssreactjsmenunavbarshadow

How to make a shadow on Semantic Ui React Navbar Menu

Im trying to make a shadow on navbar... I know how to make a shadow but its not working on my navbar.

Here is an image of what my navbar look like...

enter image description here

I purposely but green border so you can see that i didnt put the wrong class name.

i put a red shadow on the navbar and the box...

Here is my css for navbar:

.ui.secondary.pointing.menu {
  border-bottom: 3px solid green !important;
  box-shadow: 3px 3px 6px red !important;
}

and here is for the box:

.box {
  height: 200px;
  background-color: blanchedalmond;
  box-shadow: 3px 3px 6px red !important;
}

You can see my full code here: https://codesandbox.io/s/xenodochial-darwin-lr55t

And you can preview here: https://ml88b.csb.app/admin

Solution

  • your shadow is working but not visible because of .box background-color. remove background-color or move the menu div inside pushable div.

    Or

    add position: relative; style to this class .ui.secondary.pointing.menu