Page scroll to id to highlight current element on sticky nav

[Jamal]

Hi

I’m using page scroll to id to create a one page site. How can i make the sticky navigation “know” which item was highlighted on the primary navigation? When i click on an element on the primary navigation and page scrolls down, none of the links of the sticky nav are highlighted. Thanks !

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

Tough question!

I found this article: http://callmenick.com/post/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation

And adapted the JS a bit for WordPress: https://gist.github.com/generatepress/ceba614f8fbaf1b433fc947190ba5841

Haven’t tested it, so it will most likely need some tweaking.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jamal]

Thanks for the reply Tom but some more tweaking needed 🙂

The sticky navigation disappeared at all and i’m getting errors in the console which seem to increase with every scroll. This is the error
Uncaught TypeError: Cannot read property 'top' of undefined

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

Can you give it another shot with the changed code?

I added

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Lyle]

Hi Jamal,

I am just in the process of putting together a tutorial on this very subject using GP + GP Premium and Elementor and hope to have it completed later this evening.

This is the site that I will be building in the tutorial:

http://stuffingeneral.com/

In the meantime however, you will find out how to do the active section menu highlighting in this tutorial I made a while back that uses DWB and BB … same idea and CSS 🙂

http://snifflevalve.com/tutorials/dynamik-website-builder-beaver-builder-one-page-website-with-smooth-scroll/

Cheers!
Lyle

http://snifflevalve.com
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

[Jamal]

Thanks Tom that worked !

I have got some more questions though, if you don’t mind:

1. I have slideout navigation enabled on desktop and hamburger menu is always highlighted. Any way to exclude it?

2. If possible can i keep one element highlighted till the next one comes into view? ( just looking for perfection, wouldn’t mind if it’s too much an ask)

Lyle, thank you but Tom’s snippet worked wonders. Just out of curiosity, would your method have worked if i didn’t opt for “Enable on WordPress Menu links” from inside page scroll to id?
Nice site btw, how and where did you add #home to make it scroll to the top of the page? Thanks !

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Lyle]

Jamal – will have to try it with that option enabled.

As for the #home id, I added this to the Before Header hook location in GP Hooks:

<div id="home">&nbsp;</div> and then this CSS in Simple CSS:

#home {
    max-height: 0px;
}

http://snifflevalve.com
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

[Tom]

Hmm, the #primary-menu ID should make it only target the main navigation – not the slideout.

Any chance you can show me what’s happening?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Lyle]

Jamal, Tom,

Just thought that I would update to say that the tutorial mentioned above with GP, GP Premium, PS2ID and Elementor is now available. Perhaps is may shed some light on the matter 🙂

https://youtu.be/1pSnr0DvOHA

Cheers!
Lyle

http://snifflevalve.com
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

[Jamal]

Here is the site Tom, cannysolutions.se .

Thanks Lyle, #home worked nice in before header hook, although after watching your excellent tutorial i’m torn between using #home and just leaving theme’s back to top button take care of it.

Any other suggestions/corrections much welcome.

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

Hmm, not sure why that’s happening with the slideout button.

I’ll play with it some more in the morning.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jamal]

I have opted against using slideout on desktop so you can consider the issue resolved for now. ( would love to use similar setup in future )

Went with Lyle’s css once i found out the built in fullscreen-enabled class to make my sections full screen.

If you dont mind, please take a look again as i would like to know if there is a solution to the last section overlapping the footer.

Thank you very much !

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

Did you figure this out? I’m not seeing any overlap. Looks great 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jamal]

Thanks Tom

I didn’t figure it out yet, tried viewing my site from library computers and everything looked alright on desktop at least but it’s different on my screen

http://i.imgur.com/ETUqILd.png see there is almost no bottom padding on the last section

http://i.imgur.com/G9QzFvs.png and here you can see the section extending into the footer.

Please check the site on mobile as well, the little text i have in there overflows out of the section. And it doesn’t look like it sets every section to height if viewport.

Do you think fullscreen-enabled will work? Sorry to bother you with this again 🙂

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

Technically, the fullscreen-enabled class wasn’t meant for Sections (although it’s cool that it works..).

Instead, I would try using the vh unit.

So give your sections a class, and then do this:

.my-section-class {
    height: 100vh;
}

Worth a shot 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts