When navigating to #id, element is hidden under fixed position header

Question

I have a Bootstrap 3.0 navbar with that is always visible at the top of the page, but this could represent anything for which the position property is fixed.

<nav class="navbar navbar-default navbar-fixed-top" >

Because fixing it takes it out of the document flow, I need to add some padding to the body element so the content isn't hidden when the page is first display

body {
    padding-top: 70px;
}

The problem is that when I click a menu item to navigate to a section, like #About then the top of the section is cut off.

jsFiddle

Q: Is there a way to adding padding so that the full item will come into view when navigated to?

score 8 · Answer 1 · edited May 23 '17 at 11:44

8

Updated Answer:

As described in this answer, The problem is, your browser always wants to scroll your anchor to the exact top of the window. If you set your anchor where your text actually begins, it will be occluded by your menu bar.

Instead, set the padding-top for the container to the amount offset you want, and the margin-top for the container to the opposite of the padding-top. Now the container's block and the anchor begin at the exact top of the page, but the content inside doesn't begin until below the menu bar.

section {
    padding-top: 60px;
    margin-top: -60px;
}

jsFiddle

edited May 23 '17 at 11:44

Community

1
1

answered Sep 22 '13 at 20:43

KyleMit

30,350
66
462
664

but this results in padding between the title and the bounding box of the element. Is that really what you want? – shennan Sep 22 '13 at 20:47
1

love you! this solve my problem! – Akza Mar 21 '20 at 11:29

score 3 · Accepted Answer · edited Jul 08 '14 at 21:21

3

I would set the overflow: hidden on the body and add your site's content to a scrollable element.

Your layout should look like this:

<html>
<head></head>
<body>
    <div class="navbar"></div>
    <div class="wrap">
        <!-- rest of content for site -->
    </div>
</body>
</html>

Add these CSS rules:

html, body {
    overflow: hidden;
    height: 100%;
}
body {
    padding-top: 50px;
}
.wrap {
    height: 100%;
    overflow: auto;
}

Check out my fiddle

edited Jul 08 '14 at 21:21

KyleMit

30,350
66
462
664

answered Sep 22 '13 at 20:48

Charles Ingalls

4,521
5
25
33

This is better, though there are implications for using `height:100%;` as some of the content will be trailing depending on how high the nav bar is. – shennan Sep 22 '13 at 20:51
That is great! Much less hackish and actually looks the way I want it to. Follow up question, if I'm using the margin trick (`.wrap { margin: 0 auto; }`) to center my content, can I avoid the additional scrollbar in the middle of the page with your approach. See [**fiddle**](http://jsfiddle.net/KyleMit/gDLJm/6/) – KyleMit Sep 22 '13 at 20:55
1

Yes, in this case you have to wrap the content within another div and apply overflow:auto to the outer div (the one that is 100% in width). Check my fiddle: http://jsfiddle.net/gDLJm/7/ – Charles Ingalls Sep 22 '13 at 20:59
the scrollbar is generally a browser's president, but there are certain vendor-specific CSS properties you can use to stop them appearing. It's not advised if you're not providing them with an alternative to scrolling though. – shennan Sep 22 '13 at 20:59
perhaps I stand corrected... – shennan Sep 22 '13 at 21:00

When navigating to #id, element is hidden under fixed position header

jsFiddle

2 Answers2

Updated Answer:

jsFiddle

Check out my fiddle