Archived topic
Secondary Navigation Hook Linked to Smooth Scroll Anchor
5 replies · Started by Michael on February 19, 2021
I have created a block hook element that is a button (titled Quick Picks). I hooked this button in the secondary navigation using the hook “generate_inside_secondary_navigation”. It displays fine but there are two things that I haven’t been able to figure out.
Item One
My secondary navigation is left-aligned but when I make the button appear, it aligns the navigation to the right and aligns the button to the left. I would like the navigation to remain left-aligned and locate the button to the right.
Item Two
I want to link this button to an anchor and would like to use the smooth-scroll class on the button so there is a nice smooth transition but I don’t see any obvious way to do it.
I’ve included the site URL and credentials if you need to access. Thanks much!
Hi Michael,
For issue 1, try this CSS:
.gb-button-wrapper.gb-button-wrapper-4d66f3dc {
order: 2;
}
.secondary-navigation .main-nav {
margin-right: auto;
}For issue2, go to the block element, add this class to the button: smooth-scroll.
https://www.screencast.com/t/z1YbjPzxIrJl
Let me know :)
Hi Ying. Well, we're getting closer. See below...
Issue 1
I applied the CSS in the Customizer and it did change the order but not enough. See the link to the image in the private window.
Issue 2
I tried the fix that you suggested prior to posting the ticket but that didn't seem to perform the smooth scroll when applied. The movement is very abrupt behaving like a default link. If you go the the secondary navigation, I created a link within the menu itself called Quick Links with the smooth-scroll applied and it behaves as expected. But the button I placed with the hook doesn't seem to take to the smooth-scroll.
Thanks so much.
For issue 1, edited CSS here:
https://generatepress.com/forums/topic/secondary-navigation-hook-linked-to-smooth-scroll-anchor/#post-1664858
For issue 2, make sure thesmooth-scroll class is applied to the Button itself, not the Buttons block :P
Gotcha! That button tripped me up! 😛
Both fixes worked great. Thanks again Ying!
You are welcome :)
