CSS Box Shadow not working

SSimplyIT · Jan 19, 2021

I've tried to add a box shadow to my menu, but it doesn't appear to be working.

CSS:
.side-menu {
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.56) !important;
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.56) !important;
}

I've giving the group a custom class named side-menu

I have the slider for menu in menu style turned off because I want people be able to see the buttons without having to click on something to show them.

This is the result if I turn on the slider:
It shows the box shadow, but only for the button that opens and closes the menu.

How do I get the box shadow to appear where I drew the red lines?

Jasper · Jan 23, 2021

Hi SimplyIT !

I see what the issue is, due to the animation the visibility of the menu is set to hidden by the default.

If you change your code to the following, the shadow would apear for the non-menu version:

.side-menu {
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.56) !important;
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.56) !important;
  visibility: unset;
}

Let me know if this works

SSimplyIT · Jan 25, 2021

Jasper

Thanks I also had to add !important, but it works now.

visibility: unset !important;