-
Posts
-
I’ve been able to somewhat achieve what I’m looking to do but I am not quite there yet and need help.
I have created a page with multiple color sections, each with their own ID.
I then add those IDs as custom links to the Main Menu.Clicking the menu scrolls me to the desired Color Section.
Manually scrolling to the a color section highlights the nav item. Perfect.HOWEVER…
I want to create the menu for the page targets on the PAGE itself, not on the main menu and have that menu ‘dock’ under the main menu when scrolling so that it is persistent below the main menu.
I have turned off main menu size transforms so that it is a fixed size.
Please have a look at these images to see what I am describing…
View of page nav on pag (POC page)
http://www.keithcorcoran.com/x01.jpgView of page nav on POC page when clicking on or scrolling to About Us target.
http://www.keithcorcoran.com/x02.jpgView of Main Menu rollover over top of persistent page nav
http://www.keithcorcoran.com/x03.jpgI have tried to create a new custom widget area at the top of the page with a new menu within it but the menu doesn’t behave as the main menu does with regards to class name updating to ‘current-menu-item’
Here are the needs for this request
- This ‘page contents menu’ I’m trying to create should be on the page itself.
- Menu would be manually created for each page it is needed on.
- Menu should be at a z-index above the current page and stay fixed below the Main Nav
- Clicking link on Page Contents Menu should scroll to Color Section Target
- Scrolling to Color Section Target highlights target in Page Contents Nav
I can manage the css myself mostly unless there is some trickery to highlight the nav. I’m looking for a way to make this happen even if it means adding/extending some functions.
Thanks!
Hey kc!
Unfortunately this kind of customization is beyond what we can assist with through support. It should be possible to hook into the scroll to function and create a custom widget with absolute positioning or that will pull itself out of the container but keeping it all working within the theme and not cause issues will take a good bit of time to create.
A good place to look for a freelance developer if you need more help on it is Microlancer or Codeable.
Best regards,
DevinDevin,
I figured it would be pretty custom but just some of the info you’ve given alone is helpful and pretty much what I was after. I was more looking for ideas on where to start given the way the theme is set up as opposed to plug and play code.I can figure out most of it but was hoping to not have to fully reverse-engineer too much of the theme to figure it out.
Can you point me to the file that is handing the adding the “current-menu-item” class when a nav item is clicked?
Also can you point me to the file handling the the nav highlighting and scroll-to functionality.I should be able to whip up some jquery to hook into the right functions once I find them.
Thanks for the help.
keith.
The current menu item is actually added by WordPress unless Kriesi added something else for anchors (which I don’t think he did). A modified version of Scrollspy is also included in the js/avia.js with all of the other js including the scrollto functionality. This is actually a feature Kriesi mentioned he would be adding in down the road so there is a tiny bit of prep in place for it.
If you aren’t already, use the custom menu widget to output the menu after creating it in the menus manager. That should add all the WordPress menus encoding to it.
- The topic ‘Single page persistent navigation with scrolling and current target’ is closed to new replies.