Bootstrap: anchors and body top margin/padding

Question

I'm using Bootstrap with a global navbar fixed to the top of the page body.

    <div class="navbar navbar-fixed-top navbar-inverse">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="/">MyBrand</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a href="#>Page 1</li>
                        <li><a href="#>Page 2</li>
                        <li><a href="#>Page 3</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

I added a 40px margin on top of the body in order the top of page content underlying not to be overlayed by the navbar.

body {
    background-color: #f5f5f5;
    position: relative;
    margin-top: 40px;
}

Up to there, everything works fine. I also make usage of internal anchors in order to ease the navigation inside the page, using the same mechanisms Twitter used with the affix component on the Bootstrap documentation, making the user able to jump to different sections within the page (see http://twitter.github.com/bootstrap/getting-started.html)

<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>

[...]

<section id="section1">
    [...]
    [...]
    [...]
</section
<section id="section2">
    [...]
    [...]
    [...]
</section
<section id="section3">
    [...]
    [...]
    [...]
</section>

My problem is when the user clicks, the browser sticks the target to the very top of the screen, the content disappears under the navbar. I noticed Twitter used a trick, the targeted <section> tags include a "padding-top: 30px;", the closest <h1> include a "margin-top: 10px;" CSS directive in order the text to be displayed exactly 40px below the top of the screen.

I cannot allow me to "lose" 40px between each section, my display have to remain compact. My question is: is there a way in order internal anchors not to stick to the very top of the screen view but to remain away from of the top of the screen an arbitrary length?

Answer 1

Finally, I figured out how to easily solve this issue:

body {
    background-color: #f5f5f5;
    position: relative;
    margin-top: 40px;
}

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

This means a 40px margin is added on top of the body, a 40px padding is added on top of the sections, a negative 40px margin is also added in order to move up their respective expected locations, introducing an invisible margin taken into account when the browser draws the display to a section after an anchor is clicked.

Hope this help.

Answer 2

To get it to scroll to the correct position and to have the selected menu item be correct when scrolling the page, you need to set padding-top: 40px; on the anchor, and set margin-bottom: -40px; on the previous sibling of the anchor.

You can achieve this with a JS snippet that will find the elements from the nav menu and apply the styling changes.

$("header .nav a[href!=#]").each(function(){
    $($(this).attr("href")).css("padding-top", "40px").prev().css("margin-bottom", "-40px");
});