I need help with applying CSS rules to my navbar menu without affecting the collapsed menu. I came across a solution here and tried using this code:
@media (min-width: 980px) {
/* your conditional CSS*/
}
However, the issue arises when my browser window is at 900px because the collapsed menu isn't shown, and therefore my CSS isn't applied. Below is the code for my menu:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header_links">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="header_links">
...
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Can someone guide me on how to apply CSS rules to my menu only when it's not collapsed reliably?