Global top navigation menu with anchors for other pages

[enriquedmn]

I have my global top navigation menu, which includes anchors for my main page, so when clicked there is a scroll animation to get to that point within the page. 

My site has a blog, so when creating each blog post, the same global menu is applied to any other page I create, but that makes the navigation items useless, as I'm in a different URL and it adds the #anchor, but those anchor points are not in this page but the main page.

I tried changing the navigation options so that we have the main page URL plus the specific anchor, but if I use this as the global menu, the scoll animation in the main page disappears and I just see a quick jump to that anchor point.

Is there a way to keep both features? The menu in the main page that has the smooth scroll animation to the anchor points, and the menu for other pages that can take users back to the main page and it's anchor points.

[Jnix284]

@enriquedmn the quick jump from other pages is how the browser is directing them to the anchor point and can't be overwritten that I know of, whereas the on-page anchor link is being handled by your scroll animation. 

If I'm on another page, like the blog, I don't want to go to the top of the main page and then slowly scroll down before I get to where I actually want to be.

My suggestion would be to do a small focus group and conduct user testing to see if the difference is actually perceived. Make sure to ask questions that guide them to take actions and respond, rather than leading questions specifically about the animation vs. jump. You can do this with friends and family, it doesn't have to be a major expense/effort to get some feedback to help determine whether it's worth pursuing this further.

[enriquedmn]

Hello @Jnix284, thanks for the quick reply.

I agree that if you're in another page and want to go to an anchor on the main page, the scroll animation would be strange for the user, so going directly to that anchor point is correct.

My issue is that, if I use the 2nd global menu I showed, with the URL to the main page and adding the anchors, the scroll animation is lost while I'm on the main page. This 2nd global menu does let the user navigate from other pages back to the main page, but while on the main page, the scroll animation to the anchors is lost.

I'm trying to be very descriptive and specific, but let me know if the issue is not clear.

Thanks!

[Jnix284 · Accepted solution]

Thank you for clarifying @enriquedmn, I see that I missed a key detail there!

So the only way I can think to manage this would be to create a custom template for your home page that removes the global header and uses a local header for that page only.

It would be the same as the global header, except using your anchor link only menu.

how to do this will depend greatly on the theme you're using (custom vs hubspot vs marketplace) and whether you have a child theme (hubspot or marketplace only).

Let me know if you have questions about how to go about this and I can share a few questions I would need answers to in order to provide further guidance.

[enriquedmn]

@Jnix284 I see, I thought something like that would be the solution, but since it's a custom theme developed by a 3rd party, I'm having trouble with customization.

I don't see an easy way to copy the theme to make modifications, or how to use separate themes in different pages for the same website. I could do some Google searches if there is existing documentation, I just wished there was an easier way that I was missing.

I'm guessing since it's a custom theme, there help you can provide will be limited, but any guidance is again appreciated. 

[Jnix284]

Hi @enriquedmn with it being a custom theme, you wouldn't need to copy anything, there's a few tricks with templates we could use to overwrite the header on the home page only.

I have a really busy week ahead, but I'd be open for connecting via zoom to take a look at the options together to see if I can help directly or refer someone to do it if it requires more coding than what I have time for.

If you'll send me a private message from the community, we can connect over email to work out the details.