- This topic has 21 replies, 5 voices, and was last updated 1 year, 8 months ago by
Inga.
-
AuthorPosts
-
December 4, 2016 at 10:42 am #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.
December 4, 2016 at 10:49 am #251333Tom
Lead DeveloperLead DeveloperTough 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-developmentDecember 4, 2016 at 11:10 am #251339Jamal
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.
December 4, 2016 at 11:20 am #251352Tom
Lead DeveloperLead DeveloperCan 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-developmentDecember 4, 2016 at 11:48 am #251361Lyle
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:
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 π
Cheers!
Lylehttp://snifflevalve.com
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and ElementorDecember 4, 2016 at 1:04 pm #251393Jamal
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.
December 4, 2016 at 4:43 pm #251432Lyle
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"> </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 ElementorDecember 4, 2016 at 7:53 pm #251443Tom
Lead DeveloperLead DeveloperHmm, 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-developmentDecember 4, 2016 at 8:13 pm #251448Lyle
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!
Lylehttp://snifflevalve.com
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and ElementorDecember 5, 2016 at 12:48 am #251479Jamal
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.
December 6, 2016 at 12:11 am #251815Tom
Lead DeveloperLead DeveloperHmm, 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-developmentDecember 7, 2016 at 1:31 pm #252479Jamal
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.
December 7, 2016 at 8:07 pm #252552Tom
Lead DeveloperLead DeveloperDid 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-developmentDecember 8, 2016 at 11:31 am #252784Jamal
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.
December 8, 2016 at 8:08 pm #252879Tom
Lead DeveloperLead DeveloperTechnically, 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 -
AuthorPosts
- You must be logged in to reply to this topic.