Anchor Section hidden under Topbar

[Deesign]

Hi there,

We’ve got an anchor section on the home page that is scrolled to in the main navigation, that’s working well but the sticky top bar is covering the top part of the section including the heading. This only happens when the link is selected on the same page (one page navigation) when we visit the same link from another page the top of the anchor section aligns perfectly with the bottom of the top bar.

Is there a solution to make both links from the same page and different pages both align correctly so that the bottom of the top bar and the top of the id section match without covering any part of the id section?

Thanks in advance.

[tristup]

Hi @Deesign,

Thanks for reaching out.
It seems that the section padding is the reason behind your issue, I would suggest you adjust the top padding to get rid of it.

Hope it helps.
Thanks

[Deesign]

Thank you @tristup

I had to add 125px of padding to make it align correctly and the result is a very unpleasant design for that section.

With the suggested solution above the alignment still doesn’t work on mobile devices and when visited from another page main nav on the site it’s alignment is now off . Your suggestion is live to review, but now the section doesn’t look great, it aligns OK on desktop but the section anchor is not aligning on mobile devices + there’s the issue that the anchor link responds to different positions when visited from the home page then from any other page on the site.

Is there no other way to have this align correctly across the board without adding redundant padding?

[ruenel]

Hello @Deesign,

You have added this custom CSS:

.x-topbar.x-topbar-fixed {
    position: fixed;
    width: 100%;
    max-width: 1120px;
}

Please go to X > Theme Options > Headers and set the Top height to 142 pixels because this is the height of the fixed top bar.

Best Regards.

[Deesign]

Thank you @Ruenel - we LOVE it with you jump in with solutions!

Unfortunately, no luck this time, I removed the first suggested padding and added 142 to the top height under Headers as suggested without the results we were hoping for. The sticky top bar still cuts off the top of the section including the header content.

I tried higher increments without any luck either, from the home page.
Visiting this anchor link from the Contact page aligns perfectly now, it seems slow and covers 20% of the section to start but then jumps back up to perfect alignment with the bottom of the top bar and the top of the section aligned - but from the home page navigation the top bar still covers important content.

[friech]

Hi @Deesign,

Unfortunately, this is something that the standard X header can’t do without customization. I recommend upgrading to PRO and build that header with Pro’s header builder.

This may look can be achieved with a few custom CSS, but it’s not, you need a script for this to subtract the height of the entire header for the scroll to jump on the right area, even if we able to achieve this with custom CSS/JS it will be hard to maintain in the future.

Converting from X to Pro

Thank you for understanding,

[Deesign]

Thank you @friech - I can appreciate that advice for the future.
The issue is that we just launched this new campaign for the X website and don’t have time to make a conversion before the launch this week. Sigh… why does the direct link to the anchor work (and any links from other pages) but not the one on the home page nav bar - pretty frustrating!

[friech]

Hi @Deesign,

Actually on my end, even if you navigate from the contact page or any other page when you click the “FREE Fish & Chips” it does not land in the right area.

With that simple header layout, If you switch on PRO today and start recreating the header in PRO’s Header builder it could be done by tomorrow. if you notice the topbar, logobar, and navbar, has a scrolling issue as well, the transition from static top to the fixed top is not smooth. I’m sorry but we won’t provide customization on this that might complicate things.

Thank you for understanding,