Natasha Kydd Natasha Kydd - 1 month ago 8
CSS Question

How to stop second navbar from overlapping fixed navbar at the top of the page

I'm creating a webpage that has two navbars, one that is fixed and moves with the page when I scroll, and contains links to other pages, and the second navbar is for linking to certain sections of text on the same page.

The second navbar is causing me a lot of problems, mainly because it keeps overlapping the fixed navbar and site header.

I want the second navbar to move up when I scroll down, but go underneath the fixed navbar and headers.

Here is what I have:

<div class="container-fluid"style="padding-top:500px; width:100%;">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand"><span class="glyphicon glyphicon-signal"</span></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#Overview">Overview</a></li>
<li><a href="#method1">Cisco Method</a></li>
<li><a href="#method2">PEAP Method</a></li>
</ul>
</div>
</nav>
</div>


Any help would be great, I know its probably a really small thing but its driving me crazy.

Answer

I'm not 100% sure on what you're asking here, but from what I understand you could solve this by giving the second navbar a z-index of 1 and the first navbar and other headers the z-index of 2 (any values would work, as long as the first navbar has a smaller z-index than the others).

Comments