Anchor jumps too far

0
votes

I have some anchor links in my One-Page Website, and I have a problem with only one of them.

The section is inside a div where I have a title and a button.

When I click the anchor link it jumps too far, specifically to the button (under the title) and not to the head of the section (before the title).

Anchor link: (The issue is with the 4th link "#solution")

<div class="navbar-collapse  collapse">
    <ul class="nav navbar-nav navbar-right scroll">
        <li class="active"><a href="#home">Home</a></li>
        <li ><a href="#about">About</a></li>
        <li ><a href="#works">Media</a></li>
        <li ><a href="#solutions">Solutions</a></li>
        <li ><a href="#partners">Partners</a></li>
        <li ><a href="#contact">Contact</a></li>
    </ul>
</div>

The section code: 

<div id="solutions">
    <h2 class="text-center  wowload fadeInUp">solutions bla bla bla</h2>
    <button onclick="window.location.href='pages/solutions.html'" class="blue_button">Button</button>
</div>
1
htmlanchor
From a brief look through, that should work. Can you provide a small working page which reproduces the problem? – DBS
I'd make a guess at some Javascript overriding an action or another element has an ID of 'solutions'. The HTML looks fine, apart from the inline Javascript – James King
the other links working very well though, i checked and no other elements has the same ID, i even changed the ID name and still with the same issue. - i have a limited knowlage with coding so maybe i didn't undesrtod your answer well. – Balagosh
[jsfiddle.net/978gcy3b/] don't get any problem click about and solutions from nav . if possible add css also. :) – Baezid Mostafa
the link you provided is not working, anyway, the about link and all the other works fine, only the solution link is jumping too far. – Balagosh

1 Answers

0
votes

fixed by adding {padding-top: 6em;} in CSS