Geek Answers Handbook

When navigating through #id, the element is hidden under the heading of a fixed position

I have a Bootstrap 3.0 navigation bar that is always visible at the top of the page, but this may represent something for which the property is position fixed.

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

Since fixing it takes it out of the document stream, I need to add some addition to the body element so that the content is not hidden when the page is first displayed

body {
    padding-top: 70px;
}

The problem is that when I click a menu item to go to a section, for example #About, the top of the section is cropped.

jsFiddle

Q: Is there a way to add padding so that the full element appears in view when navigating?

+4
2

overflow: hidden .

:

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

CSS:

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

+3

:

answer, , . , , .

padding-top margin-top . , .

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

jsFiddle

+2

More articles:


All Articles