Daniel Abraham Daniel Abraham - 17 days ago 8
CSS Question

Selected Heading goes behind the Top navigation bar

Here is my code : Navigaton Bar Issue

<header class="header">
<div class="Topheading">
</div>
<div class="TopNavigation">
<nav class="leftnav">
<ul>
<li><a href="">Test1</a></li>
<li><a href="">Test1</a></li>
<li><a href="">Test1</a></li>
<li><a href="">Test1</a></li>
<li style="float:right">
<button class="fedbut">Send Feedback</button>
</li>
</ul>
</nav>

</div>
</header>


The Top navigation bar is fixed and when clicking on the right side navigation it selects the navigation items on the page as per the heading and the selected heading goes behind the Top navigation bar.

At present...

enter image description here

But the selected heading should be below the top navigation bar.

like this...

enter image description here

Thanks in advance..

Answer

It happens because you are pointing to e.x #1 anchor and browser scrolls to that point. And because your navbar is fixed it covers part of the content. You can fix this using JS:

$(".cuntnav a").on("click", function(e){
  e.preventDefault();
  var section_id = $(this).attr("href");
  var section_offset = $(""+section_id).offset().top;

  window.scrollTo(0, section_offset-100);
});
Comments