Fixed navbar and pushing content in collapsed mode

Report · Oct 07, 2016

Hello,

I am having an issue with the navbar menu in the collapsed state. I have read a lot of discussions about menu bars, but I am new to bootstrap, so I am doing a lot of learning. I am using a fixed navbar, and have seen this page in the forum with what I think is the same issue, but the code did not work for me. I want to use the fixed navbar so the menu stays at the top of the page. Then when it's collapsed and showing the sandwich icon, I want the menu items to push the content down, not overlap it thus hiding the content in the background. Adding top margin to my content will just create a blank space that the menu drops down on when the sandwich item is clicked, and does not give the pushing down effect that I would like to have.

I found this very recent Adobe forum page that has a basic navbar menu fixed to the top, but is for a different issue. I just copied and pasted it into a new dreamweaver page for a starting point. I only used the code because it was recent and looks to me to be very basic, and that's where I need to start. I copied the code below,

Is there a way to modify the basic code below and have a fixed navbar push content down in the collapsed mode?

Thank you very much!

<!doctype html>

<head>

<title>Bootstrap 3.3.7 Starter</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

/**offset navbar-fixed-top**/

body {padding-top: 55px}

</style>

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">XYZ Company</a></div>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li></ul>

</button>

</span>

</div>

</form>

</div>

</nav>

PAGE CONTENT GOES HERE....

</div>

</body>

</html>

Report · Oct 08, 2016

The Bootstrap code above behaves exactly as expected for a fixed-top navba. Owing to how CSS fixed positioning works, a fixed-top navbar is removed from the normal document flow. Thus it has no relationship with other elements on the page.

If you want content to push downward when the mobile menu is expanded, you must remove the fixed class. And also remove the CSS padding-top offset.

<!doctype html>

<head>

<title>Bootstrap 3.3.7 Starter</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1"> <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="#">XYZ Company</a></div>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>

</ul>

</span> </div>

</form>

</div>

</nav>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>

</div>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>

</div>

</body>

</html>

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 08, 2016

Hi Nancy, thanks for the answer. Maybe I need to head a different direction, then using the navbar. I see a site like this, and they have the effect I need of a fixed menu and a collapsed menu pushing down content - minus the black top row, but I don't think they use a navbar, so perhaps a custom menu instead.

Thanks again,

Brian

Report · Oct 08, 2016

That example is not a fixed navigation menu. Why? Because it moves when you scroll the page.

Position: fixed is fixed. It doesn't move -- even when page is scrolled up or down.

I think for what you want -- always collapsed navbar - you need a little custom CSS. Add this to your custom stylesheet. Do not edit Bootstrap CSS.

.navbar-header {

float: none;

}

.navbar-toggle {

display: block;

}

.navbar-collapse.collapse {

display: none!important;

}

.navbar-nav {

float: none!important;

}

.navbar-nav>li {

float: none;

}

.navbar-collapse.collapse.in{

display:block !important;

}

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 08, 2016

Thank you.

Fixed navbar and pushing content in collapsed mode

1 Correct answer