anchor link position - Wordpress

Question

i have a anchor on this website in the sidebar. When i click on the link it goes to the right page and the anchor also works but my menu is on top of the anchor so you can't see the title. How can i fix this so the user can see the title?

  <h3><a href="/Structuur-te-huur">Structuur te huur</a></h3>
<ul>
    <li><a href="/Structuur-te-huur/#structuur-te-huur">Structuur te huur</a></li>
    <li><a href="/Structuur-te-huur/#procesbegeleiding">Procesbegeleiding</a></li>
    <li><a href="/Structuur-te-huur/#projectmanagement">Projectmanagement</a></li>
    <li><a href="/Structuur-te-huur/#training">Training</a></li>
</ul>

css

#secondary .widget ul, #footer-widgets .widget ul{
    list-style-type: '- ';
    color: #fff;
    padding: 20px;
    margin: 0;
}
#secondary .widget ul li a {
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    letter-spacing: 1.3px;
}
#secondary .widget h3{
    padding: 20px;
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 800;
}
/* widget paars*/
#secondary .widget:nth-child(2),
#secondary .widget:nth-child(7){
    background: #B167B3;
}
#secondary .widget:nth-child(2) h3,
#secondary .widget:nth-child(7) h3{
    background: #A263A4;
}
/* Oranje*/
#secondary .widget:nth-child(3){
    background: #FF9D29;
}
#secondary .widget:nth-child(3) h3{
    background: #FA9624;
}
/* Groen */
#secondary .widget:nth-child(4){
    background: #54D7C1;
}
#secondary .widget:nth-child(4) h3{
    background: #14C4A8;
}
/* Blauw */
#secondary .widget:nth-child(5){
    background: #63B9FC;
}
#secondary .widget:nth-child(5) h3{
    background: #36A6F6;
}
/* Rood */
#secondary .widget:nth-child(6){
    background: #F0524E;
}
#secondary .widget:nth-child(6) h3{
    background: #ED413A;
}

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). — Marcos Pérez Gude, Mar 16 '16 at 11:07
i'm sorry but it is not on the home page. look [link](http://ckoolhaas.buro210.com/Structuur-te-huur/) — Arend Jan Kramer, Mar 16 '16 at 11:13

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

Either add some top padding at the top of where you jump to, so that your menu does not cover it, or use javascript as in this question... Make anchor link go some pixels above where it's linked to

If it doesn't harm your design too much, the padding is probably the best option - no need to add unnecessary javascript.

edited May 23 '17 at 12:23

Community

1
1

answered Mar 16 '16 at 11:12

RichardB

2,615
1
11
14

The padding and negative margin solution in the link there is probably going to be your best bet, as long as it doesn't create unclickable areas. – RichardB Mar 16 '16 at 11:15
Thats probably the fix for now. but does it work for all the anchors? since the customer must be able to set anchors too. – Willox Mar 16 '16 at 11:16
1

That depends on how you code it, you can add it to all anchor links, or just to those with a class (in which case your customer woul have to add that class, or your CMS would have to do that for them). – RichardB Mar 16 '16 at 11:22

anchor link position - Wordpress

1 Answers1