Menu
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.
Q: Is there a way to adding padding so that the full item will come into view when navigated to?
903
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;
}
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
