Navigating to anchor hides the top part of the page

Hello,

I found an existing article from Talon how to set anchors. Great. However, when I use them, I find that linking to an anchor displays the page from the anchor onwards from the very top part of the screen. As a result, the anchor position/page area disappears behind the menu.

I could of course set my anchors a bit higher than the section that I actually want to navigate to, but was wondering if the display position of an anchor could be, say, at the middle of the screen or at least under the header part of the page where my menu appears.

Thanks!

Hello,

You can try to add some offset, please check this topic:

Please let me know if you need more help.

Kind Regards, Roman.

Hi Roman,

Thanks, but it did not give me the desired effect. I tried two options:

  1. I inserted the CSS code as I found it in the article: no effect
  2. I inserted the CSS code as I found it in the article and then figured that I had to replace #primary with the description of my own anchor, which I did. But that gave the effect that the row in which I inserted the anchor (row ID) is moved up and then overlaps with the previous row, showing overlapping texts.

Basically, I just want to start displaying the anchored row not from the very top of my page (which is then hidden by the header section of my site), but a bit lower so it starts displaying below the header.

Hope I made myself clear. My site is not yet online (locally hosted at the moment).

René

Hello René,

I don’t think that I can help you without a link. Can you please let me know when your website is live?

Kind Regards, Roman.

The site is now live. If you go to this page :

Then you will see three links to anchors on top of the site. If you try them you will see that the beginning of the anchored section disappears behind the header.

By the way, I have meanwhile switched to the pro version, not in the last place because of your excellent support, thanks for that,way better than my old site host.

Hello René,

Please try to use #pg-733-1 anchor instead of #sa-greece-cyclades, #pg-733-5 instead of #sa-greece-ionian, and #pg-733-9 instead of #sa-greece-dodecanese.

In addition please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#pg-733-1,
#pg-733-5,
#pg-733-9 {
    padding-top: 140px;
    margin-top: -140px;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

When I do that, i get the same effect that the section where the anchor is entered, is moved up and overlays with the preceeding text. Since my website is live, I have therefore reversed the changes but I took a screenshot before I did so: https://snag.gy/MI8Y3u.jpg.

I should mention that the anchors work perfectly on mobile devices. They nicely start displaying from the top of my cell phone, but that’s because the header is not shown there. On desktops the header is hiding the top part of my anchored section and that’s what I try to prevent.

Hope I made my issue clear, thanks.

Hi again Roman,

Further to my update just now, I double checked once more and found that the system hadn’t actually updated my new anchor link, because I had to save the page first after changing the row ID. So my previous test was not accurate. What I’ve done now:

  • I updated CSS code
  • I changed the row ID from sa-greece-cyclades to pg-733-1
  • I saved my page
  • Then I changed the anchor link in my text from #sa-greece-cyclades to #pg-733-1

Result:

  1. My “anchored” blue row element (showing text Mykonos) has moved up as you can see here whereas it should be on top of the area starting with “The party island”.

  2. The same row element has become wider. The width is now slightly wider than the common row width, making it sticking out on both ends. You can also see that in the screen show.

  3. Clicking on the actual new anhor-link does give the desired effect (well, almost, you suggested 140 offset and I think it must be 150 instead), however with the blue row element (which is actually the anchor) disappearing somewhere in the top. You can see the result here.

I hope the effect is clear. Pending issues:

  1. The blue row element must not move up but stay in place
  2. The blue row element must not become wider
  3. Note that I would want this offset to be applied only for desktop display, the mobile version worked perfectly as it was (since the mobile version hides the site header, hence it does not cover anything)

Although my website is live, I will leave the settings as you advised them (I have only changed the cyclades anchor so far, not the other ones yet) until I hear back from you.

Hope I was able to explain myself, please advise. Using anchors, by the way, is not uncommon, right?

Thanks!

Hello René,

Anchors are quite common. It looks like these issues require close inspection, this goes beyond our support policy. It’s considered advanced customization. As an option, you can find a reputable freelancer on Upwork for this kind of service.

Kind Regards, Roman.

Hi Roman,

OK, I understand, although a bit strange that such a common feature seems to bring head ache. As a workaround, I will change the header to a static one so it disappears while scrolling (and I am assuming that being a PRO user, does not change the policy).

Thanks anyway,
René