Dlaczego cień pudełka jest widoczny tylko po przewinięciu?

Question

Od dawna próbuję dowiedzieć się, dlaczego cień skrzynki w moim górnym menu nie jest widoczny podczas pierwszej nawigacji do każdej strony, ale pojawia się po rozpoczęciu przewijania.

To jest strona: http://gourmetsailing.co.nz/DRAFT/charters.html

Klasa z cieniem jest .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);} 

Warto wspomnieć, że używam również stickup aby uzyskać menu trzymać do góry strona: http://lirancohen.github.io/stickUp/

Być może jakiś konflikt z tym scenariuszem?

Answer 1

Spróbuj dodać position: relative do swojej klasy navbar-wrapper.

Oto co się dzieje:

Kiedy zaczniesz przewijać, deklaracja position: relative dynamicznie dodawane do div z klasą navbar-wrapper jako stylu inline, wypalanie cień pudełko.

Jeśli dodasz tę deklarację bezpośrednio do klasy, cień pola pojawi się od początku.