- This topic has 21 replies, 5 voices, and was last updated 4 years, 10 months ago by Inga.
-
AuthorPosts
-
December 4, 2016 at 10:42 am #251326Jamal
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 !
December 4, 2016 at 10:49 am #251333TomLead 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 π
December 4, 2016 at 11:10 am #251339JamalThanks 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
December 4, 2016 at 11:20 am #251352TomLead DeveloperLead DeveloperCan you give it another shot with the changed code?
I added
December 4, 2016 at 11:48 am #251361LyleHi 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!
LyleDecember 4, 2016 at 1:04 pm #251393JamalThanks 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 !December 4, 2016 at 4:43 pm #251432LyleJamal – 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; }
December 4, 2016 at 7:53 pm #251443TomLead 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?
December 4, 2016 at 8:13 pm #251448LyleJamal, 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!
LyleDecember 5, 2016 at 12:48 am #251479JamalHere 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.
December 6, 2016 at 12:11 am #251815TomLead DeveloperLead DeveloperHmm, not sure why that’s happening with the slideout button.
I’ll play with it some more in the morning.
December 7, 2016 at 1:31 pm #252479JamalI 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 !
December 7, 2016 at 8:07 pm #252552TomLead DeveloperLead DeveloperDid you figure this out? I’m not seeing any overlap. Looks great π
December 8, 2016 at 11:31 am #252784JamalThanks 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 πDecember 8, 2016 at 8:08 pm #252879TomLead 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 π
-
AuthorPosts
- You must be logged in to reply to this topic.