1

enter image description here 

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="below-nav" style="background-color:red;"> 
    </div>

When default navbar width is grown from default size it overlaps div below it so how do we prevent this and let div appear below without being overlapped???I don't want the div to be of fixed width.

Chris
  • 458
  • 4
  • 17
dpndra
  • 2,098
  • 4
  • 23
  • 29
  • 1
    do not understand your question, can you please provide fiddle or screen dump. – Nimmi Jul 17 '14 at 07:14
  • Are you trying to increase height manually? I am not able to find issue with code given. Refer this - http://www.bootply.com/hCJpNFz5ap – Nimmi Jul 17 '14 at 10:41
  • any additional CSS you have applied to your main content div? – Nimmi Jul 17 '14 at 10:42
  • http://www.bootply.com/P3on2q1XGI Looking at it in mobile view, which is when the expand/contract comes in to play, it appears to be behaving exactly as you want. May need to comment out any code you have added and then add back line by line, to see if you can find the offending line. – Sean Ryan Jul 17 '14 at 14:14

1 Answers1

0

This question is answered in Twitter Bootstrap - top nav bar blocking top content of the page

It's about when to collapse and adjusting the padding-top for the body element.

Community
  • 1
  • 1
user1072936
  • 46
  • 2
  • It is preferred to copy the most relevant parts of the linked solution to the answer rather to post just link that might be dead in the future. – Andreas Sep 09 '14 at 11:34
  • it's not the same question indeed, this navbar is not fixed on top like the one in the linked counterpart. – DrLightman Dec 15 '14 at 11:45