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

Profile picture for KyleMit
KyleMit

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.

<!-- language: lang-html --> 
<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

<!-- language: lang-css --> 
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?

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:

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

Add these CSS rules:

<!-- language: lang-css --> 
html, body {
    overflow: hidden;
    height: 100%;
}
body {
    padding-top: 50px;
}
.wrap {
    height: 100%;
    overflow: auto;
}

Check out my fiddle