Is there a way to keep my main navigation menu fixed at the top of the page? I have both a hamburger nav menu that pops up when clicked and an embedded page nav menu.
I want the hamburger nav menu to always stay on top, but for some reason, the embedded nav menu keeps showing through.
Check out this codepen to see the issue: https://codepen.io/TheGreatEscape/pen/ebYgGO You can also watch a short YouTube video of the problem here: https://youtu.be/sWzCLOzRJUQ
Here is the relevant CSS code snippet:
/*===== NAV BUTTONS =====*/
#menu-button{ display:none}
a {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
}
a:hover, a:active, a:focus {
outline: none;
float:none;
clear:both;
text-align:center;
display:inline-block;
position:absolute;
left:0;
right:0 }
.templateux-navbar {
position: fixed;
top: 0px;
left: 0;
width: 100%;
padding: 0;
z-index: 99999;
}
.templateux-navbar .container-fluid {
max-width: 100%;
}
.templateux-navbar .toggle-menu {
z-index: 9999;
}
.templateux-navbar .templateux-menu {
top:35px;
float:none;
clear:both;
text-align:center;
display:inline-block;
position:absolute;
right:210px
}
...