[Resolved] Drop Shadow under Menu is inconsistent

[Scott M]

On the homepage, and on the “News” page, the menu shows a drop shadow as intended. On all the other pages, however, the menu does not show a drop shadow. I assume because the header image is on top of it and covers the drop shadow. Any way I can make this more consistent so that the shadow is always visible? Thanks!

[Leo]

Hi there,

Can you modifying this CSS:

.main-navigation {
    -webkit-box-shadow: 0px -1px 7px 0px rgba(0,0,0,.75);
    -moz-box-shadow: 0px -1px 7px 0px rgba(0,0,0,.75);
    box-shadow: 0px -1px 7px 0px rgba(0,0,0,.75);
}

to this?

.main-navigation {
    -webkit-box-shadow: 0px -1px 7px 0px rgba(0,0,0,.75);
    -moz-box-shadow: 0px -1px 7px 0px rgba(0,0,0,.75);
    box-shadow: 0px -1px 7px 0px rgba(0,0,0,.75);
    position: relative;
}

[Scott M]

that got me 90%, and i adjusted the location of the shadow to make it look right.
Thank you so much, you guys are awesome!

[Leo]

No problem 🙂

[Author]

Posts