My website looks perfect on Firefox, but unfortunately, it's not displaying correctly on Safari (iOS) and some Chrome devices. The Menu-Bar, which should be position fixed, is not showing properly. I'm not sure what the issue is.
Screenshots:
There should be no white space between the address bar and the menu:
https://i.sstatic.net/WoFbV.jpg
In this screenshot, you can see the menu only when it's above the parent: https://i.sstatic.net/QOuuc.jpg
I'm having trouble understanding why this is happening, as fixed position is supposed to be relative to the viewport and not its parent. "The viewport is always their containing block" (http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Summary)
*The CSS:
.main-navigation {
clear: both;
float: left;
width: 100%;
position: fixed;
width: 100vw;
height: 6rem;
background: -webkit-linear-gradient(top, #fff, #d6d6d6);
background: -moz-linear-gradient(top, #fff, #d6d6d6);
background: -ms-linear-gradient(top, #fff, #d6d6d6);
background: -o-linear-gradient(top, #fff, #d6d6d6);
top: 0;
right: 0;
z-index: 100;
overflow: visible;
}
nav {
display: block;
}
.home header.site-header {
top: 24rem;
left: 8rem;
position: absolute;
z-index: 3;
}
.home header.site-header is the parent of the menu