Make Twitter Bootstrap navbar go to top of page on collapse

Question

I am wondering what would be best practice in this situation. I have a navbar in a twitter bootstrap page and there is content above the page when viewed on a desktop. The navbar collapses when the screen width is low enough, but after the collapse the navbar is in the same position but I want it to be at the top of the page after collapse. What would be the best way to do this?

Here is my demo: http://www.bootply.com/61283

1

You should add code & demo – MisterJ May 13 '13 at 11:58

Carol Skelly · Answer 1 · 2013-05-14T11:44:48.120

0

Assuming you're using the standard Bootstrap nav-collapse for the navbar, you could use the 'visible-desktop' for the desktop-only content:

<div class="container visible-desktop">Desktop only content above nav..</div>

On smaller screens this will not show, and as a result the navbar will display at the top.

Demo 1

EDIT (alternative):

An alternative method would be to use @media queries and change the CSS to position elements on the smaller screens..

@media (max-width: 767px) { 
    .navbar{
        position:absolute;
        top:0;
    }
    #topContent{
        margin-top:45px;
    }
}

Demo 2

edited May 14 '13 at 11:44

answered May 13 '13 at 12:08

Carol Skelly

351,302
90
710
624

Thanks, but I want the content still visable on collapse but I want it below the navbar rather than above. – guru May 13 '13 at 12:35
See demo 2.. you may need to adjust the CSS – Carol Skelly May 13 '13 at 13:19
On the demo 2 the text disappears when the navbar collapses. – guru May 14 '13 at 11:25
Only problem now is that the content doesn't move down when the menu is opened – guru May 14 '13 at 11:49

Make Twitter Bootstrap navbar go to top of page on collapse

1 Answers1