0

I am new to Bootstrap and have the following setup at the moment:

    <div class="container">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                  ...
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  ...
                </div>
            </div>
        </nav>
    </div>

    <div class="jumbotron">
        <div class="container">
            ...
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <ul class="nav nav-pills nav-stacked" role="tablist">
                    ...
                </ul>
            </div>
            <div class="col-md-8">
                <div class="tab-content">
                    ...
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="container text-center">
            Hello
        </div>
    </div>

I would like to use affix or something similar to allow the user to scroll like normal, but the navbar, jumbotron and the nav-pill list on the side should all stay fixed. So in essence the only thing that would scroll is the content on the right of the pills. I tried doing this with affix myself but wasn't sure of what to set the offset so was unable to achieve the intended result. I'd be grateful for a push in the right direction!

Keir Simmons
  • 1,634
  • 7
  • 21
  • 37

1 Answers1

0

I think for your purpose it'd be best to only worry about affix for the side nav, and use CSS positioning for your Jumbotron (just like Bootstrap does for the navbar at the top).

For the jumbotron, set the position to fixed and give it an explicit top (50px is the height of the navbar above it), set the width to 100% if you want it to stretch across the viewport, and give it an explicit height. Then set the z-index to a value higher than 1 and less than 1030 (the z-index given to the navbar by Bootstrap). This will make sure your content scrolls behind your jumbotron.

CSS for the jumbotron:

.jumbotron{
    position: fixed;
    top:50px;
    width: 100%;
    height: 200px;
    z-index: 10;
}

Then create your container and give it a margin-top of (navbar height) + (jumbotron height) + (any desired margin), in our example this is 250px + a 30px margin. This will ensure your page is positioned below the fixed nav and jumbotron.

#container-id{
    margin-top:280px;
}

For the side-nav, in your ul element include data-spy="affix". You don't need to set any value for data-offset-top because you want your side-nav to be fixed in place immediately.

Here's a jsfiddle with an example navbar and sidenav plus your daily dose of lorem ipsum: http://jsfiddle.net/3LLZR/

seanmhanson
  • 219
  • 1
  • 6
  • Perfect, except its not very responsive (as the columns stack it looks very ugly). Is there a way to apply the CSS to jumbotron and the affix only if the columns aren't stacked? – Keir Simmons Aug 05 '14 at 22:22
  • 1
    Yes, add it in the min-width at the break point you selected for your menu. – Christina Aug 05 '14 at 23:00
  • I've also seen the sidenav replaced by a fixed nav styled differently by using **hidden-xs** etc to hide the sidenav and **visible-xs** to render replacement content accordingly. There also seems to be some contention about this/a bug report for similar issues mentioned in a previous question here: http://stackoverflow.com/questions/22512168/ – seanmhanson Aug 05 '14 at 23:04