I'm having trouble getting z-index to work. I've searched online but can't find a solution.
How can I make the .navigation class have a lower z-index than the .mobilenav and .mobilenavclosed classes so that they appear above everything else?
I've tried adjusting the position of the elements and changing the z-index, but nothing seems to be working. Any advice would be appreciated!
Here is my HTML:
<div class="navWrapper" ng-controller="NavController">
<section class="navigation">
<div class="nav-container">
<button ng-click="openHamburger()" class="hamburger"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></button>
<nav>
<ul class="nav-list" ng-repeat="navitem in navitems">
<li>
<a href="#!">{{navitem.title}}</a>
</li>
</ul>
</nav>
</div>
</section>
<div ng-class="{'mobilenav': isOpen, 'mobilenavclose': isClosed}">
<button ng-click="closeHamburger()" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<div class="menuwrapper">
<button class="optionwrapper" ng-repeat="navitem in navitems">
<div class="navicon"></div>
<p>{{navitem.title}}<p>
</button>
</div>
</div>
This is my CSS:
@keyframes active {
from {
border-bottom: 0px solid #5aaafa;
}
to {
border-bottom: 5px solid #5aaafa;
}
}
body,
html {
height: 100%;
margin: 0 auto;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: red;
}
.menuwrapper {
display: none;
}
button.btn.btn-default {
display: none;
}
.navWrapper {
height: 100vh;
width: 100vw;
}
.activeindicator {
width: 100%;
height: 10%;
background: #5aaafa;
}
.hamburger {
display: none;
}
.close {
display: none !important;
}
.navhidden {
display: none !important;
}
.navigation {
width: 100%;
height: 50px;
background: #333;
color: white;
position: relative;
z-index: 1;
}
.navigation a {
color: white;
text-decoration: none;
font-weight: 300;
}
.navigation a:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 5px solid #5aaafa;
}
<!-- More CSS code -->