CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sahil Chauhan
Sahil Chauhan

Reputation: 185

Adding 2 fixed navbar at different postions

The problem I am getting is that I want the second navbar with class navbar2 to be also fixed in the div class="col-xs-10" itelf so that the content below it can be scrolled easily without moving the navbar 2. The other problem is that when the navbar2 is fixed then the width cannot be maintained on different sizes of screens. The working code is here https://jsfiddle.net/0sqk00Lw/4/ .. Can someone help.. Thanks in advance

<nav class="navbar navbar-default navbar-fixed-top navbar1">
<div class="container">
    NAVBAR FIXED TOP
</div>
</nav>
<div class="row">
<div class="col-xs-2" style="background-color:blue">
    hello 
</div>

<div class="col-xs-10">
    <nav class="navbar navbar-default navbar-static-top navbar2">
       <div class="container">
          NAVBAR FIXED TOP
       </div>
    </nav>
    <p>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    </p>
</div>

Upvotes: 0

Views: 70

Answers (2)

Yashwanth Rao
Yashwanth Rao

Reputation: 246

Take a look at this fiddle. https://jsfiddle.net/h7fjtbhz/

All elements changed to 100% width and calculated height for the p tag

height:calc(100% - 100px);  // change 100px to height of remaining elements above the second navbar

Tell me if something has to be changed.

Upvotes: 1

Eduard Void
Eduard Void

Reputation: 2714

.navbar2{
  position:relative;
  width:100%;
  background-color:#fed136;
}

if you set position to relative it can't be fixed. it needs position:fixed to be set. and then you have to position it in relation to the viewport (not the parent element)

Upvotes: 0

Related Questions