[Resolved] Sticky Navigation Menu hiding anchor Headings

[Drew]

Is there a way to show anchor link headings when using a sticky navigation menu? I tried smooth scroll and no difference.

[David]

Hi there,

when using the smooth scroll, you add the smooth-scroll class to the menu item ( or link ) as opposed to the element you want to jump to.

This article here explains how to add classes to menu items just in case:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Drew]

I added the class smooth-scroll and still no change.

[David]

Is Smooth Scroll activated in the Customizer > General settings?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Drew]

Yes, smooth-scroll is activated.

[David]

Aah ok – right don’t use <a> tags to jump to instead edit the Section or widget that you want to jump to in elementor and in the Advance Settings > ID field add your id there e.g 'about'

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Drew]

Just made that update and it is still hiding the headings. Only difference now, is it shows it for a split second then it goes behind the sticky menu.

[David]

urgh… elementors own smooth scroll is interfering with that.
So disable the GP Smooth scroll.

Add your IDs to the Section you want to jump to ( not the widget ) and include enough top padding on the section so as it isn’t covered by the nav

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Drew]

Still not working. I just added a spacer above the about section and it still hides the “About” heading.

[David]

You need to remove the ID from the heading widget and add it to the Section itself, then the menu link will jump to the top of it section. Or you could add it to the spacer widget. Just not on the heading itself.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Drew]

ID on the spacer worked. Thanks for your help!

[David]

Glad we got there 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts