[Resolved] Page scroll to id to highlight current element on sticky nav

Home Forums Support [Resolved] Page scroll to id to highlight current element on sticky nav

Home Forums Support Page scroll to id to highlight current element on sticky nav

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #251326
    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.

    #251333
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #251339
    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.

    #251352
    Tom
    Lead Developer
    Lead Developer

    Can you give it another shot with the changed code?

    I added

    #251361
    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

    #251393
    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.

    #251432
    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

    #251443
    Tom
    Lead Developer
    Lead Developer

    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?

    #251448
    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

    #251479
    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.

    #251815
    Tom
    Lead Developer
    Lead Developer

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

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

    #252479
    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.

    #252552
    Tom
    Lead Developer
    Lead Developer

    Did you figure this out? I’m not seeing any overlap. Looks great πŸ™‚

    #252784
    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.

    #252879
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.