One Page and Active Links Setup

Hi guys,

I have a couple of issues with my one-page setup and with the display of active links. As I am locally developing my website, I will provide screenshots to illustrate my problems. I am using PRO version 2.2.4.

Issue #1: One Page Navigation

I set up the one-page navigation following your article in the knowledge base by adding an unique ID to some sections, adding custom links to my menu, and assigning that menu to my page like so:

The one-page navigation works fine. However, when I click on a custom link and the page is scrolled to that anchor, the web-address displayed at the top of the browser changes to “base.url/#ID”:

How can I get rid of that behavior and have the address being left unchanged (i.e. no #ID addition)?

Issue #2: Active Links

My second issue is that those one-page anchor links show up active in my header and footer navigation menus even though I turned all the options off in my header setup and turned on only the primary particle for the current link in my footer setup:

Here’s what it looks like on the front-end:

So, basically I am missing an option to turn custom anchor links off in the active links setup. As you can see, the hashtag link “DESIGN” appears to be active in the footer because parts of that section are visible in the viewport.

This doesn’t make sense. If there’s one anchor link that is supposed to be active, then it would be the menu item “KONTAKT” as this is the link to the footer which has the respective ID #kontakt. But because the footer section is not at the top of the viewport, that link does NOT appear active.

Any ideas how I can mitigate these issues?

Thanks!

Hi There,

Thank you for writing in, for issue #1 it is how the One Page Navigation works, it needs the ID on the URL to jump link. It could be possible with custom development, but this would be outside the scope of support we can offer.

For the issue #2, I can confirm the bug on my end, I’ve submitted this to our issue tracker so the developers will be made aware of it.

For now, you can try to set the Toplinks text-color interactive color same as the base color. You can’t activate the active color on the Footer bar because there is not enough room to scroll down in there. Jump link only to your last section.

Thanks for understanding.

Thanks for your answer.

Issue #1: Previous to the latest version of Pro it was possible to do this with some JS code you guys often provided in this forum. I’m very happy we don’t need that code anymore, but apparently we have to live with that issue now? Is JS necessary to prevent the addition of the ID to the URL?

Issue #2: Thanks.

Hi There,

Thanks for the feedback, I did check the PRO v2.1.6(stable release) but that is doing the same thing with one-page navigation too. I did test v1.2.7 and yes, that one does not append an ID on the URL, I added this as a feature request so it can be reconsidered again for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

I’m not entirely certain about that, but regretfully we could not provide a JS code on this case.

Thank you for understanding,

Hmmm… that’s a bit disappointing as a well-working one-page navigation/behavior was a feature requested by many users for a very long time now.

In that case, I don’t really understand what activating the “One Page Navigation” option in the page settings is good for as “jumping” to sections by adding its ID to the URL is not a X/Pro feature, but rather possible by default with any website in any browser. It seems that all that was implemented in the newest Pro version is smooth scrolling to the section the anchor link points to without the need to manually add any JS code?

I would really like to see more options for one-page layouts (including offsets and ease styles). It seems like other themes like the BeTheme are working better in that regard and can build one-page layouts without appending the name of the ID to the URL. Also, your very own X showcase site works as a one page and doesn’t add anything when using those anchor links at the navbar.

Hey Patrick,

Please let me add some more information here. To clarify, our One Page Navigation (clicking on a link with hash smooth scrolls to a section and takes offset the sticky header’s height if applicable) feature works. The addition of the hash in the URL is not a bug. It actually has been introduced due to customer request. It actually replicates the normal behavior of the browser which is beneficial to other users.

Regarding the One Page Navigation offset, it now has been improved too. It now takes into account the sticky header.

The X showcase site you referred to is our sales page. It was built with X but it was not meant to showcase the functionality of the latest functions of the theme.

Now that you have shared your feedback though, @friech has submitted a feature request. Please stay tuned maybe an option to turn off the hash in the URL might be included in the future.

Please also note that in our How to Get Support article, comparison of competing products is prohibited.

Thanks.

Hi Christian,

Thanks for this very helpful clarification! Now I better understand the improvements that have been implemented.

I still don’t understand what the “One Page Navigation” option in the page settings is good for as all this seems to work even if “One Page Navigation” is deactivated (i.e. no menu is selected). But you’re absolutely right, the One Page behavior has been much improved and the current state is much appreciated! Alone the fact that we get a working one-page navigation out-of-the-box without the need to manually add JS is a much appreciated enhancement!

That said, there’s still room for further improvements:

  1. A global option to hide the hash from the URL
  2. A global option for offset and scroll (i.e. ease) adjustments
  3. A local option in the “Active Links Setup” particles to disable anchor links to display as active
  4. Making all this work for cross-page anchor links (i.e. from example.com to example.com/about-us/#section)

Thank you!

Sorry about that

Sorry I missed that. Yes, the One Page Navigation option now does not have any function but to change the menu for a page.

We definitely appreciate your feedback. I’ll add them to @friech’s feature request post.

Number 4 actually already works but there’s still a refinement coming maybe in one of the succeeding releases.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.