Why is the box shadow only visible after scrolling?

Question

I've been trying for ages to figure out why the box shadow on my top menu is not visible when you first navigate to each page, but appears once you start scrolling.

This is the site: http://gourmetsailing.co.nz/DRAFT/charters.html

The class with the shadow is .navbar-wrapper

.navbar-wrapper {
background-color: #FFFFFF;
width: 100%;
margin: auto;
-webkit-box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.5); /* [h-offset] [v-offset] [blur radius] [color: red, green, blue, opacity]; */
-moz-box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.5);}

It's worth mentioning that I am also using stickUp to get the menu to stick to the top of the page: http://lirancohen.github.io/stickUp/

Perhaps some kind of conflict with that script?

Answer 1

Try adding position: relative to your navbar-wrapper class.

Here's what's happening:

When you start to scroll, the position: relative declaration is dynamically added to the div with class navbar-wrapper as an inline style, firing the box shadow.

If you add this declaration to the class directly, the box shadow is there from the start.