Moving anchor point to avoid contents to be covered by navigation bar

  • Hello everyone,

    I’m working on a landing page using the Twenty Seventeen theme.
    I have a big problem that probably (I hope) has a simple solution.

    The links on the nav bar on the top of the page are linked to ancors on the body of the page. For this reason when you click it scrolls down. Problem is that while scrolling the navigation bar is still visible and part of the contents are covered by the bar.

    Do you know how can I make sure that this doesn’t happen? Should I alter via CSS the panning of the anchor? I read somewhere that the best solutioj involves Javascript (that I know but I’ve never used in WordPress).
    I hope in a simple solution though!

    Thank you for your help!!!!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    Which links are you referring to? The WordPress navbar isn’t visible unless you’re logged in, usually.

    Thread Starter Madquake

    (@madquake)

    I mean the navigation bar of the site… Basically a small rectangle on the top that takes the whole browser width containing the links…

    It is around 30/40 pixel height but it convers titles of the sections you are sent to through ancors.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    I’ve run into this on my own sites with fixed headers. This is a generic CSS solution… no JS/jQuery is necessary.

    https://www.caktusgroup.com/blog/2017/10/23/css-tip-fixed-headers-and-section-anchors/

    You’ll find similar tutorials Googling on “anchor links fixed headers CSS”. The key is to have a class associated with your anchors so you can target your CSS.

    For example,

    See https://i.imgur.com/RKIzkx6.png

    Thread Starter Madquake

    (@madquake)

    Seen the ancors go to the position y=0 (top of the browser window) the contents are covered by the navigation bar that stays over the rest of the site… I guess because of a z-index of 1…

    Thread Starter Madquake

    (@madquake)

    Thank you Steve… This is quite insightful! Just a question… I created the ancors using Elementor. Do you know if it’s possible to assign a class to them even if created in Elementor? I guess I will have to check into the options if it’s possible to do that…

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Sorry, I don’t know. I don’t use page builders.

    Thread Starter Madquake

    (@madquake)

    Thank you anyway ??
    There is the possibility that it automatically includes a class (in that case all I have to do is targeting it)… Alternatively I can double check as there is a feature inside that allows me to change the padding for each element individually… In the end the ancors are 3… ??

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    However, you said you’re using twentyseventeen and it already handles the anchors for the front page with no intervention.

    Be aware that when you’re logged in, there’s a 32px or so admin bar on the top that’s not there for your users, so be sure to validate your stuff in a private or incognito window, so you can see what the non-logged in user sees.

    Thread Starter Madquake

    (@madquake)

    Yeah… I am not talking about the dark grey bar of the backend… I am talking about the actual navigation bar of the site… Is created when you scroll down and the logo disappears up… The links remain, fixed into this white bar…

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Moving anchor point to avoid contents to be covered by navigation bar’ is closed to new replies.