On Giving div ids of same webpage as hyperlinks in Navbar, correspondong data not showing correctly

Question

In the code below i am giving IDs of various row as hyperlinks to Anchor tags in Navbar. White Clicking Home & About in Nav on webpage, Page is getting scrolled to respective rows, but top most text i.e. Text Written in h1 tags is getting scrolled below the navbar & is not getting visible. However for Service & Contact it is good. Can someone explain why this is happening.

  <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">

    <!--         <div class="navbar-brand">

                <a href="#"><img src="TECHIZONE_LOGO_FINAL.png" style="width: 7%; height=" 10px;"></a>

            </div> -->
              <a class="navbar-brand" href="#">BRANDNAME</a>

              <button type="button" class="navbar-toggle" data-toggle="collapse" data-taget="#mynavbar">

                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>

              </button>
          </div>

          <div class="collapse navbar-collapse" id="myNavbar">  
          <ul class="nav navbar-nav navbar-left">
            <li><a href="#HOME">HOME</a></li>
            <li><a href="#ABOUT">ABOUT</a></li>
            <li><a href="#SERVICE">SERVICE</a></li>
            <li><a href="#CONTACT">CONTACT</a></li>
          </ul>

        </div>


    </div>

  </div>
    <div class="container">
         <div class="jumbotron">
              <h1>BOOTSTRAP CLASSES</h1>
              <p>NAVBAR</p>
         </div>


         <div class="row" id="HOME"> 
            <div class="col-md-6">
              <h1>THIS IS HOME SECTION</h1>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>


            </div>
            <div class="col-md-6">

              <h1>THIS IS HOME SECTION</h1>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>
              <p>THIS IS HOME SECTION</p>







            </div>


          </div>
         <div class="row" id="ABOUT"> 
            <div class="col-md-6">

              <h1>THIS IS ABOUT SECTION</h1>
              <p>THIS IS ABOUT SECTION</p>    
              <p>THIS IS ABOUT SECTION</p>    
              <p>THIS IS ABOUT SECTION</p>    
              <p>THIS IS ABOUT SECTION</p>    
              <p>THIS IS ABOUT SECTION</p>    
              <p>THIS IS ABOUT SECTION</p>    
              <p>THIS IS ABOUT SECTION</p>    

            </div>
            <div class="col-md-6">
              <h1>THIS IS ABOUT SECTION</h1>
              <p>THIS IS ABOUT SECTION</p>
              <p>THIS IS ABOUT SECTION</p>
              <p>THIS IS ABOUT SECTION</p>
              <p>THIS IS ABOUT SECTION</p>
              <p>THIS IS ABOUT SECTION</p>
              <p>THIS IS ABOUT SECTION</p>
              <p>THIS IS ABOUT SECTION</p>


            </div>


          </div>
         <div class="row" id="SERVICE"> 
            <div class="col-md-6">

              <h1>THIS IS SERVICE SECTION</h1>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
            </div>
            <div class="col-md-6">

              <h1>THIS IS SERVICE SECTION</h1>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
              <p>THIS IS SERVICE SECTION</p>
            </div>


          </div>
         <div class="row" id="CONTACT"> 
            <div class="col-md-6">
              <h1>THIS IS CONTACT SECTION</h1>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
            </div>
            <div class="col-md-6">
              <h1>THIS IS CONTACT SECTION</h1>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
              <p>THIS IS CONTACT SECTIOn</p>
            </div>


          </div>





    </div>

Possible duplicate of [Fixed page header overlaps in-page anchors](https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors) — CBroe, Jul 02 '18 at 09:07

Robin · Accepted Answer · 2018-07-05T08:17:04.380

Why this happens:

When you click your links, the scroll position is set so that the linked element (in your case the h1 tags) are placed at the very top of the page. The issue and the resulting overlap is due to the navbar having a position:fixed attribute. This will display it at the top of the page regardless of the scroll-position.

Read about the position attribute here: https://www.w3schools.com/cssref/pr_class_position.asp

What to do:

Quick solution would be to increase the padding-top for the h1 elements with the height of the navbar:

h1 {
   padding-top:60px;
}

The result of this:

https://jsfiddle.net/n4mez16b/30/

As you can see the downside is that the area between the h1's and the elements before them increases which may not be desired. A better looking solution that may work even better, using the :before pseudo element (change margin / height values to fit your needs):

h1:before { 
  display: block; 
  content: ""; 
  margin-top: -40px; 
  height: 40px; 
  visibility: hidden; 
  pointer-events: none;
}

The result of this:

https://jsfiddle.net/n4mez16b/37/

More examples / solutions:

Hope you find a solution for your issue, best of luck!

EDIT:

To answer your other question, why your two last items display as desired (service & contact) it's most probably due to the browser window height. Since you are hitting the end, the window can't scroll the content any higher. :)

Hi, I am stratified with your reply in edit regarding Service & Contact. But still doubtful for "navbar-fixed-top" reason. If it is due to .navbar-fixed-top class, the issue should be resolved by giving padding to body. but it is not resolving that way. Instead we need to give padding to h1, making me think that its not basically not overlapping of navbar & scroll position. — Ishaan, Jul 05 '18 at 06:19
Why would the issue be resolved by giving padding to body? The padding would be applied before your first h1 but as soon as you click an anchor-link the linked item is put at the top of the page. What you'd need to do, is setting the anchor-point further to compensate for the height of your navbar. I will update my answer with a better looking alternative in a minute. :) — Robin, Jul 05 '18 at 08:11

On Giving div ids of same webpage as hyperlinks in Navbar, correspondong data not showing correctly

1 Answers1