0

I have a fixed-top navbar created with bootstrap library. I have padded the body from top to avoid hiding the content under it. But when i click on a link "about us" for example, the top of that will hide under the navbar. Is there anyway to fix it so that the content of about us is just below the navbar when link is clicked?

body{
  padding: 3em 0;
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar bg-dark navbar-light fixed-top">
  <div class="container-fluid">
      <a href="#about-us">About Us</a>
  </div>
</nav>
<div class="content">
  <div id="about-us">
       <h1>About Us</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <div>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>

  </div>
</div>
Talha Munir
  • 498
  • 1
  • 4
  • 16
  • Are you able to show a working example? Obviously your code excerpt is missing the body and other stuff, but I’m assuming that’s because you’re simplifying your example. Can you put this in a fiddle or something similar? – Lee Apr 22 '19 at 13:20
  • Your code actually does what you want. Maybe something else is wrong. – arieljuod Apr 22 '19 at 13:23
  • you see that when you click on the "about us" link, the

    gets scrolled up and hides under the navbar. I want it such that the linked
    remains below the navbar

     – Talha Munir Apr 22 '19 at 13:27
  • Possible duplicate of [Using scrollIntoView with a fixed position header](https://stackoverflow.com/questions/13614112/using-scrollintoview-with-a-fixed-position-header) – Pribina Apr 22 '19 at 13:39
  • Hi Talha - just following up. Was your question answered satisfactorily? If there is more I can help with, please add a comment below my answer, or edit your question to clarify what else you want to know. Otherwise, it would be great if you could choose a "best answer" (by clicking the checkmark beside the answer) to close out the question. If no answer provided helpful information, please add your own answer and select that as the best answer. *(You won't get any points for doing so, but that will close out the question.)* Thanks! – cssyphus Jun 11 '19 at 23:51

3 Answers3

0

Use

#about-us {
  padding: 3em 0;
}

instead

body {
  padding: 3em 0;
}
Valentin.U
  • 11
  • 2
0

Here is one potential solution that also adds the "smooth scroll" feature, while at the same time solving your problem.

The secret here is to use jQuery .animate() method, along with an offset, to slide the page to the desired section (less the offset value). So, you need:

  1. A class name, any class name

  2. Add that class name to the menu links (Note that the menu links must be anchor tags, for this particular code example)

  3. Use the jQuery code in the below demo that watches for clicks on elements with that className, and then uses jQuery animate to schlep down to the section with the ID that corresponds to the href attribute. The magic that solves your problem is the offset.

Instead of $('a.jtkirk') as your selection/trigger, you might also be able to use $('a[href^=#]') (which says: for all a-tags with an href that begins with the # char) -- but that does not work with StackOverflow's stack snippets, so I cannot test/demo it. But there is no harm using a class to identify the smooth-scroll links. Again, you can choose any name for the class, I used Capt Kirk's moniker to make it easy to see that.

DEMO:

$('a.jtkirk').click(function(e){
    e.preventDefault();
    var kirkoffset = 50;
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top - kirkoffset
    }, 700);
});
body{
  padding: 3em 0;
}

/*  Below not necessary - only for demo layout */
nav .scroll{
  display:flex;
  justify-content:flex-start !important;
}

nav .scroll a {margin-right:15px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar bg-dark navbar-light fixed-top scroll">
  <div class="container-fluid scroll">
      <a class="jtkirk" href="#about-us">About Us</a>
      <a class="jtkirk" href="#nuther-one">Nuther One</a>
  </div>
</nav>
<div class="content">
  <div id="about-us">
       <h1>About Us</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
  </div>
  <div>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
  </div>
  <div id="nuther-one">
       <h1>Nuther One</h1>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
  </div>

</div>
Community
  • 1
  • 1
cssyphus
  • 37,875
  • 18
  • 96
  • 111
0

You could use the :target selector with a :before element with the height of your navbar.

body {
  padding: 3em 0;
}

:target::before {
    display: block;
    height: 40px;
    margin-top: -40px;
    content: '';
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar bg-dark navbar-light fixed-top">
    <div class="container-fluid">
        <a href="#about-us">About Us</a>
    </div>
</nav>
<div class="content">
    <div id="another">
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
    <div id="about-us">
        <h1>About Us</h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <div>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>
</div>
azeós
  • 4,853
  • 4
  • 21
  • 40