In Chrome, the following code works as expected, with the list element positioning itself at the very left of the .PageContainer when scrolling down. However, in Safari and Firefox, the list element positions itself just after the logo. Are there any CSS rules that I might be missing?
var stickyEl = $("#top-navigation"),
elTop = 0;
$(window).on('load', function () {
elTop = stickyEl.offset().top;
});
$(window).on("scroll", function() {
stickyEl.toggleClass('sticky', $(window).scrollTop() > elTop);
});.PageContainer {
border:1px solid green;
margin-top:5px;
margin-right: auto;
margin-left: auto;
width: 80%;
height: 1200px;
}
.nav-wrapper {
width: 100%;
background-color: whitesmoke;
display: inline-flex;
border:1px solid red;
vertical-align: middle; /*this is to remove white space between divs */
}
.myLogo {
width: 20%;
float: left;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
border:1px solid blue;
}
.top-navigation{
border:1px solid red;
margin-left: 1em;
position: relative;
margin-top: auto;
margin-bottom: auto;
}
.topnav {
list-style-type: none;
padding: 0;
margin: 0;
}
.topnav li {
display:inline-block;
}
.topnav li a {
display: inline-block;
color: black;
text-align: center;
text-decoration: none;
font-size: 17px;
transition: 1s;
padding: 16px 16px;
}
ul.topnav li a:hover{background-color: #555;}
.sticky {
position: fixed;
top: 0;
margin-left: 0;
-webkit-transform: translateZ(0);
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="PageContainer">
<div class="nav-wrapper">
<div class="myLogo">
<svg viewBox="0 0 200 200" style="display: block;">
<circle cx="100" cy="100" r="100" fill="red"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="white"/>
<text x="100" y="100" text-anchor="middle" dy="0.35em" font-size="300%">my logo</text>
</svg>
</div>
<div class="top-navigation" id="top-navigation">
<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li
><li><a href="#news">News</a></li
><li><a href="#contact">Contact</a></li
</ul>
</div>
</div>
</div>
</body>