Twitter Bootstrap Section Scrolling Issue

Question

On my website in development, I have a link in my navbar that should bring me to the section with the id About, however It seems to ignore the positioning of my navbar, thus throwing off the position a tight bit. Any help in resolving this issue would be appreciated

Visualization of the Problem

Before clicking: https://i.stack.imgur.com/66diM.jpg After clicking: https://i.stack.imgur.com/bQZ12.jpg

Navbar Code

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" rel="home" href="#" title="Virtual Currency Converter"><img style="max-width:350px; margin-top: -20px;"
                                                                                                    src="./assets/img/vicuco_brand.png"> 
                </a>
            </div>


            <div id="navbar" class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="page-scroll" href="#About">About</a>
                </li>

                <li><a href="#config" id="config"><span class="glyphicon glyphicon-cog gi-2x"></span></a></li>
              </ul>
            </div><!-- nav-collapse -->

        </div>
    </nav>

About Section Code

        <section class="bg-primary" id="About">
        <div class="row">
            <div class="container">
                <div class="row">
                    <div class=" text-center">
                        <h2 class="section-heading" id="AboutHeader">About Us</h2>
                        <div id="AboutSubtitle">
                            <p>
                                Vicuco stands for <strong>Virtual Currency Converter</strong>. <br><br>
                                Indeed, it is our goal to allow for simple and easy conversion <br>
                                of the virtual currencies among themselves, as well as to foreign currencies. <br><br>
                                We are an aggregator. That means we aggregate virtual currency <br>
                                trading data from all major virtual currency exchanges, in order <br>
                                to show you a near real-time conversion rate. <br><br>
                                We will send you in the right direction, if you need to buy, sell, or <br>
                                exchange virtual currency.<br><br>
                            </p>
                            <p>
                                Follow us on <a class="btn btn-social-icon btn-twitter" href="https://twitter.com/vicucodotcom">
                                <span class="fa fa-twitter fa-2x"></span></a> and check out our
                                <strong><a href="http://vicuco.com/blog/" target="_blank">blog</a></strong>
                                for our latest developments! 
                            </p>

                        </div>
                    </div>

                </div>
            </div>
        <img src="assets/img/cloud.png" id="cloud" width="25%" height="100%">

        </div>
        </section>

score 0 · Answer 1 · edited May 23 '17 at 11:43

You are using a fixed header, so it's location and size will be ignored by the other page contents. One method to fix this is to use a little script that does the following:

Detects the navbar height
On navabar item click - scroll the page but offset it from the top of the viewport
The offset is determined by the navbar height we just detected.

You can see it added below.

I say 'one method' because there is an alternate approach where the anchor points can be offset (see here)

$(document).ready(function() {
  $(".navbar ul li a[href^='#']").on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({ 
        scrollTop: $(this.hash).offset().top - $('.navbar').height()
    }, 600);
});
  
});

#one, #two, #three {
  height: 1000px;
  }

#one {
  background: pink;
  }
#two {
  background: salmon;
  }
#three {
  background: lightsalmon;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http:////maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Offset Scroll</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#one">Section one</a></li>
          <li><a href="#two">Section two</a></li>
          <li><a href="#three">Section three</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

  <div class="container">
    <section id="one"></section>
    <section id="two"></section>
    <section id="three"></section>
    </div>
</body>

Twitter Bootstrap Section Scrolling Issue

Visualization of the Problem

Navbar Code

About Section Code

1 Answers1