CODEWITHSUNDEEP
htmlcsstwitter-bootstrapscrollbarnavbar
ПавелБ
ПавелБ

Reputation: 41

Bootstrap. Make vertical browser scrollbar start under fixed navbar. (not overlap)

I'm using an example code for a fixed navbar provided by bootstrap. Is there any relatively easy way to make a browser scrollbars not overlap a fixed navbar.

Here is how it is in example: https://i.sstatic.net/wCEVt.png

Here is what I'm trying to get: https://i.sstatic.net/GY0km.png

Thanks a lot in advance. Regards.

Upvotes: 4

Views: 6032

Answers (1)

Joshua Whitley
Joshua Whitley

Reputation: 1186

In order to do this, you'll need to make your header a fixed element at the top of the page and use a position: fixed container to wrap the rest of the content on your page. Here is an example:

CSS:

html, body {
    width: 100%;
    height: 100%;
}

#header {
    position: fixed;
    width: 100%;
    height: 50px;
    top: 0;
}

#container {
    width: 100%;
    position: fixed;
    top: 50px;
    bottom: 0;
    overflow: auto;
}

HTML:

<body>
    <div id="header">
        <ul><!-- other header elements --></ul>
    </div>
    <div id="container">
        <!-- All of the content of your site -->
    </div>
</body>

Upvotes: 2

Related Questions