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">
<a class="navbar-brand"><span class="glyphicon glyphicon-signal"</span></a>
<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>
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).