[Resolved] Secondary Navigation Hook Linked to Smooth Scroll Anchor

[Michael]

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!

[Ying]

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 🙂

[Michael]

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.

[Ying]

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 😛

[Michael]

Gotcha! That button tripped me up! 😛

Both fixes worked great. Thanks again Ying!

[Ying]

You are welcome 🙂

[Author]

Posts