[Support request] Sticky Page Jump Navigation On Certain Pages

[Nick]

I’m looking to add a sticky Page Jump bar to the top of certain pages in GeneratePress. We have some pages that are very long and we have Jump-To links at the top of the page to make for easier navigation. I would like these links to appear sticky at the top of the page.

Is there a way to manually do this with Generate Press?

For Example, You have a few long pages about Car Parts and then subtopics for “Transmission”, “Engine”, “Body” etc.

I would like to create a sticky bar at the top of the page that says: “Jump To: Transmission | Engine | Body | Wheels”

This bar would replace the menu sticky navigation bar that I know is easily created on GeneratePress, but instead of having regular menu items, it would have a list of Jump To links that link to jump anchors like “#transmission”, “#engine” etc.

The site in question is not yet built in GeneratePress which is why I haven’t included links to my site here. I’ve easily managed to do this using Thrive Themes and I’m wondering if it’s possible to do it once I rebuild with GeneratePress. I’d like to do it without an added plugin or too much extra bloat in code.

Here is an example of a site that has what I’m looking for: https://www.nomadicmatt.com/travel-guides/thailand-travel-tips/

[Ying]

You can manually add the jump links to a block element – hook, and assign it to the specific page as location, choose after_headerhook.

Then we can use CSS to make it sticky. But it will not replace the default sticky navigation, it will be an independent element.

[Nick]

Thanks Ying! One more thing. Does the current GP sticky navigation use Jquery? Isn’t that a little bit slow to load? Would it be better to create a block link for the navigation as well if that would mean no JS? Sorry for the newbie questions.

[Ying]

Does the current GP sticky navigation use Jquery?

It’s using vanilla JS, not Jquery. So it’s much faster.

Would it be better to create a block link for the navigation as well if that would mean no JS?

If you don’t need the transition effect, you can use CSS to make the navigation sticky as well, no need to create extra blocks.

[Author]

Posts