NAV menu doesn't appear on top - html

Question

How do i make my nav menu permanently on top? I have two nav menu's on a page - a main hamburger nav menu that clicks and pops up, and then an embedded page nav menu
I would like the hamburger nav menu to be permanently on top, but for some reason the embedded nav menu appears through.
Here is a codepen of the issue: https://codepen.io/TheGreatEscape/pen/ebYgGO
Here is a short youtube video if the issue: https://youtu.be/sWzCLOzRJUQ
and the related CSS Code:
/*===== 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
}
.templateux-navbar .templateux-menu ul {
position:relative;
float:right;
margin-bottom: 0;
margin-top: 18.5px;
right:178px;
}
.templateux-navbar .templateux-menu ul li {
display: block;
}
.templateux-navbar .templateux-menu ul li a {
left:30px;
top:.5px;
text-decoration: none;
border-radius:0; border:none;
line-height:40px;
display:block;
margin-right: 0px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .05em;
color: #1a1a1a;
position: relative;
padding-bottom: 5px;
}
.templateux-navbar .templateux-menu ul li a:before {
content: "";
position: absolute;
bottom: 6px;
height: 3px;
width: 0;
left: 0px;
background: #f70f4d;
-webkit-transition: .45s width ease;
-o-transition: .45s width ease;
transition: .45s width ease;
}
.templateux-navbar .templateux-menu ul li a:hover:before {
width: 100%;
}
.templateux-navbar .templateux-menu ul li a:hover {
text-decoration: none;
background-color: inherit;
border:none;
color:#1a1a1a;
font-weight:bold
}
.templateux-navbar .templateux-menu ul li h5 {
position: absolute;
text-decoration: none;
background-color: inherit;
left: 125px;
top: -8px;
color:#1a1a1a;
font-weight:bold;
font-size: 13px;
border-radius:0;
border:none;
line-height:40px;
display: inline-block;
width: 100%;
letter-spacing: .1em;
}
.templateux-navbar .templateux-menu ul li.active > a:before {
width: 100%;
}
.templateux-navbar .templateux-menu ul li:last-child a {
margin-right: 0;
}
/*===== BACKGROUND MENU FOR MENU BUTTON, GET IN TOUCH ===*/
.menu {
width: 33px;
height: 33px;
padding: 5px;
display: block;
cursor: pointer;
position: relative;
float: right;
right: -56px;
top: 24px;
z-index: 1;
}
.menu span {
cursor: pointer;
height: 3.25px;
width: 24px;
margin-bottom: 3px;
background: #000;
position: relative;
right: 0;
display: block;
transform: rotate(0deg);
transition: .7s ease;
}
.hidden {
opacity: 0;
transition-delay: .5s;
pointer-events: none;
cursor: default;
}
.visible {
opacity: .97;
}
.menu.open span:nth-child(1) {
top: 10px;
transform: rotate(180deg);
transition: .7s ease;
background: #ffffff;
}
.menu.open span:nth-child(2) {
opacity: 0;
right: 100px;
background: #000;
}
.menu.open span:nth-child(3) {
top: 0px;
transform: rotate(-180deg);
transition: .8s ease;
background: #ffffff;
}
#navigation {
background: #000000;
font-family: 'Titling Gothic Bold';
color: rgb(0, 0, 0);
font-size: 0px;
width: 100%;
height: 450px;
text-align:left;
}

Answer 1

Your issue is the z-index. I fixed it by adding the class hamburger to your first .templateux-navbar element and then modified your CSS a bit. You can see the modified CSS below.
.templateux-navbar {
position: fixed;
top: 0px;
left: 0;
width: 100%;
padding: 0;
z-index: 9;
}
.templateux-navbar.hamburger {
z-index: 10;
}
Your code has this issue because you gave both the menus the same z-index so it means that the element that is defined next in the HTML will naturally get higher priority, which in your case is your second nav.
Making your hamburger menu have a higher z-index solves this issue.