所选标题位于顶部导航栏的后面

Question

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...

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

like this...

Thanks in advance..

Answer 1

It happens because you are pointing to ex #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);
});