Increase padding if and only if section is at top of page

Question

I'm using bootstrap to create a page with a jumbotron top, a sidenav (affix-ed to top) and sections of content that rise to the top when clicked in the sidenav. Functionally, it is all working fine, but positioning the main content needs help.

My objective, if possible, is to have the section of content clicked in the sidenav appear not at the very top of the page but about 70px below the top of the browser window. I can easily add 70px to the top of each section, but then the page ends up with too much white space between sections. The code is structured as follows...

<body >
<!-- navigation header - fixed to top and transparent 
================================================== -->
    <!-- <header><ul><li><a></a><li><ul></header>-->


<!-- jumbotron 
================================================== -->

<div class="container">
    <div class="row-fluid" align="center">
        <div class="jumbotron span12">
             <!-- jumbotron content height: 800px -->
        </div>
    </div>



<!-- side nav 
================================================== -->
    <div class="row">
        <div class="span3" id="side-nav" data-spy="affix" data-offset-top="760">
            <ul class="nav nav-list">
                <li><a href="#section_1_name">section 1</a></li>
                <li><a href="#section_2_name">section 2</a></li>
                <li><a> <!-- links to additional sections --> </a></li>
            </ul>
        </div>


        <div class="span9 main-content">

        <!-- Sample section 1
        ================================================== -->
            <section id="section_1_name">
              <div class="page-header">
                <h1>header</h1>
              </div>

              <h3>Why you should do this</h3>
              <p>It's so amazing you'll want to do it.  It's so amazing you'll want to do it. It's so amazing you'll want to do it.</p>

              <h3>Specfic Instructions</h3>
              <p>lorem ispum ... </p>
            </section>

        <!-- Sample section 2
        ================================================== -->
            <section id="section_2_name">
              <div class="page-header">
                <h1>header</h1>
              </div>

              <h3>Why you should do this</h3>
              <p>It's so amazing you'll want to do it.  It's so amazing you'll want to do it. It's so amazing you'll want to do it.</p>

              <h3>Specfic Instructions</h3>
              <p>lorem ispum ... </p>
            </section>

        <!-- Additional sections
        ================================================== -->

        </div> <!-- end of row -->

    </div> <!-- end span9 --->
</body>

Any ideas how to get each section X to appear 70px below the top when clicked on in the sidenav?

What version of Bootstrap are you using? In version 2.3 jumbotrons were called Hero's. But nav-lists (your left nav section) does not exist in Bootstrap 3. — Matt H, Nov 27 '13 at 17:48

score 0 · Answer 1 · answered Nov 27 '13 at 18:29

Add the padding-top: 70px; to your container div if you want everything pushed down including your side-nav.

If you don't want your side-nav to move with page scrolling, add the "affix" class. <ul class="nav nav-list affix">

In your example you also need to add the # to your href links. <li><a href="#section_1_name">section 1</a></li>

The way the Bootstrap site is built (at least 2.3) didn't use the code they are publishing the best, so using the page source as an example does not always work out.

Also, the way the nav's work is similar to anchors in the page, it just moves to that section, so it really looks best when there is more content. If there is not enough content the page won't "jump" to that location. Also it looks like it is performing strange when there are small sections and at the last sections. Even the bootstrap site does this.

Thanks Matt H. This is an old problem and related to Bootstrap 2.3. It's true that BS2.3 had Hero units but if you 'view source' on the BS2.3 docs you'll see that the top part is using a 'jumbotron' class. — globalSchmidt, Nov 28 '13 at 18:04
further comment (previously timed out): Since I've now moved on to BS3 and am using a different design, this problem has been "solved" for me. I will delete it unless there are objections from Matt H or user2603537 in the next few days. — globalSchmidt, Nov 28 '13 at 18:11

Increase padding if and only if section is at top of page

1 Answers1