Question

When I begin to scroll down this webpage the Bootstrap affix plugin cuts into the <header class="jumbotron subhead"> – this image shows this symptom:

I would like my affix navigation not to cut into <header class="jumbotron subhead"> and behave as it appears on the official documentation for Bootstrap where it does not cut into <header class="jumbotron subhead"> when you begin to scroll. Is there a way to resolve this issue with some extra CSS rules? Currently my CSS rules applying to the Affix component are exactly the same as the Affix component that features on the Bootstrap documentation, if you inspect the affixed nav on both websites, so I do not understand why it is failing to display correctly.

The CSS rules:

.bs-docs-sidenav.affix {
    top: 40px;
}
.bs-docs-sidenav {
    width: 258px;
}
.bs-docs-sidenav {
    background-color: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    margin: 30px 0 0;
    padding: 0;
    width: 228px;
}
.affix {
    position: fixed;
}
.nav-list {
    margin-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
}
.nav {
    list-style: none outside none;
    margin-bottom: 20px;
    margin-left: 0;
}
ul, ol {
    margin: 0 0 10px 25px;
    padding: 0;
}

The website I am working on (broken affix):

http://www.bestcastleintown.co.uk/boot/test2.html#slides

Bootstrap website (working affix):

http://twitter.github.com/bootstrap/javascript.html

Answer 1

All you need to do now is define where you want to position the navbar once it’s affixed. In your stylesheet.css change

.bs-docs-sidenav.affix {
top: 40px;
}  

to something like

.bs-docs-sidenav.affix {
top: 230px;
}  

Hope this helps!