Single Page Navigation Issues

Hello

I’m having some issues on a development site using a single page design (it will be the landing page of a multisite).
I’ve searched the forums and used multiple solutions, but now I’m down to 3 (related?) issues:

  1. I cannot get the menu items to appear active (hover state) when you scroll through that section. As you scroll down through a section, the corresponding menu item should show active.
  2. On mobile, the menu links work intermittently. Sometimes it goes to the correct section, sometime it doesn’t.
  3. Since this is a landing page, I have the logo in the header also anchor linked instead of a full hyperlink. Didn’t think it made sense to refresh the page instead of just taking the user back to the top.

http://htccf.develop.edgeephotography.com/

Many thanks!

Hi there,

Unfortunately, there is no stable One Page Navigation solution at the moment and you can not have the items mentioned in the Pro theme.

The X theme has the One Page Navigation functionality:

We already added the lack of the feature in the issue tracker and you will need to wait till there is a stable version. There are workarounds here and there such as:

But it is not official.

Thank you for you understanding.

Thank you for your reply. That is both shocking and disappointing. I thought the paying the premium would allow for a feature that is heavily advertised and widely used.

Hey There,

Our developers is already aware of this situation. A release update with one page navigation is under way and should be available soon.

Thanks for your understanding.

I’m getting conflicting information. Could someone please confirm that you looked at my site? It works on desktop, but not mobile. I’ve seen other sites on pro have this functionality :confused:

Hi there,

We are sorry that you felt you get the conflicting information. I checked your website and unfortunately, I do not have any further suggestion regarding the code you used. As both I and my colleague mentioned the feature of the one-page navigation is not available in the Pro completely at the moment. Whatever you see in other threads are partial codes which may or may not work in all cases.

At the moment we can not be of a further help and you need to wait for an official release of the feature which will be a solid one that will work for all cases.

Thank you for your understanding and patience.

I have removed all code and discovered a different bug.
On mobile, the menu works ONLY after opening and closing the off-canvas toggle.

  1. go to the site on mobile
  2. open the menu
  3. close the menu
  4. open the menu
  5. click a link and it will jump to the appropriate section…except the menu stays open and doesn’t close.

No modifications, just using the built in functions of the header.

Hi there,

I just checked and it seems to be working. I checked on mobile, then open the menu then click the menu and it scroll right away. It’s not closing because there is no javascript code that will close it which is probably been removed too. Would you mind providing a copy of the code that you removed? As for clarification, the menu opens and it scrolls okay, the only missing is closing it upon scroll?

Thanks!

I tried 4 different mobile devices and none of them worked unless I used the steps outlined above. Tried on Firefox and Chrome (mobile versions).
I’ll look for the code again and get back to you.
One version closed the menu fine, but never jumped to the correct section.

Hey There,

The custom JS you are using is not working because it is commented out. Please update it and use this:

/*close mobile menu on selection*/


jQuery(function($) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 62 //offsets for fixed header
        }, 500);
    		$('.x-off-canvas-close').click();
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 62 //offset height of header here too.
        }, 500);
        return false;
      }
    }
});
jQuery(function($) {
  $('.x-menu-collapsed .x-anchor').on( "click touchstart", function() {
    $('.x-off-canvas-close').click();
  });
});

jQuery(document).ready(function($) {
	$('.hm5.x-menu > li > .x-anchor').on('click touchend', function() {
		$("button.x-off-canvas-close").trigger('click');
	});
});

And since you are using CloudFlare, please login to your account first and purge your site cache before testing your site cache. It will also help if you clear your browser cache or use private browser mode in testing your site.

Please let us know how it goes.

Hello There,

If you have changed the code and cleared the cache or purged your site cache, it should have been changed. Meaning, it should have no longer be commented out.

  • I cannot get the menu items to appear active (hover state) when you scroll through that section. As you scroll down through a section, the corresponding menu item should show active.
    This feature is only available for one page navigation which is only available in the default header. This feature is not yet fully supported in the custom header.

  • On mobile, the menu links work intermittently. Sometimes it goes to the correct section, sometime it doesn’t.
    This could be related to caching and the JS code you have added.

  • Since this is a landing page, I have the logo in the header also anchor linked instead of a full hyperlink. Didn’t think it made sense to refresh the page instead of just taking the user back to the top.
    Your logo has been linked to #htcHomepageMenu. I guess this has been resolved.

Thank you.

Hi there,

There is no way we can change and purge its cache through CF, it’ only you that have access from it :slight_smile: . Purging browser cache is different than purging it from your site.

Please make the code commented, and let’s use a new one.

jQuery( function($) {

$(document).ready( function() {

setTimeout ( function() {

$('.x-off-canvas-content a[href^="#"]').off('touchstart touchend').on('click', function() {
console.log('close');
$('.x-off-canvas-close').trigger('click');

} );

}, 500 );

} );

} );

Again, please purge your site’s cache and CF’s cache before testing it.

Thanks!

Cloudflare is not active on the site as I said before.

I cannot get the menu items to appear active (hover state) when you scroll through that section. As you scroll down through a section, the corresponding menu item should show active.

This feature is only available for one page navigation which is only available in the default header. This feature is not yet fully supported in the custom header.

Not sure what you are referring to here. I used one of the built-in templates and just assigned it to my primary menu instead of “Sample #1.”

On mobile, the menu links work intermittently. Sometimes it goes to the correct section, sometime it doesn't.

This could be related to caching and the JS code you have added.

As I’ve explained already, I have NO additional code. I did this to remove any doubt about whether or not extra code was affecting the site. There is no caching on the site.

Since this is a landing page, I have the logo in the header also anchor linked instead of a full hyperlink. Didn't think it made sense to refresh the page instead of just taking the user back to the top.

Your logo has been linked to #htcHomepageMenu. I guess this has been resolved.

The links are correct and set up according to: https://theme.co/apex/forum/t/features-how-to-setup-one-page-navigation/96
My logo has been this way the entire time (since the very first post). Still only intermittently works when using the steps outlined several posts ago.

Here’s a video demonstrating exactly what I’ve been saying:
LINK

Hey There,

Please edit your custom header again and make sure that the bar that appears in mobile screens has a z-index of at least 9999 to make sure that it is on top of any layers. And at the same time, we need to make sure that the off canvas menu is on top of everything as well. Please make use of this custom css

.x-off-canvas-content.x-off-canvas-content-right.ps-container.ps-theme-default {
    z-index: 10000;
}

button.x-off-canvas-close.x-off-canvas-close-right {
    z-index: 10001;
}

Hope this helps. Please let us know how it goes.

The only z-index available in the header builder is that of the “main bar” (top most element). That is the default value set of 9994. I am using whatever the defaults were from a clean install.

I added the code above and nothing has changed. An open, close, and reopen of the menu is required to achieve any function.

Hey There,

Hey There,

​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

Thank you.

Hi there,

Thank you for the login information, I did my best regarding the mobile menu problem but I could not find why this is happening. Some core code is preventing the work at first, there must be a conflict of events triggered and bubbled to the parent wrappers, but I could not pinpoint.

Actually, I double checked the case with X theme which is already having the One Page Navigation implemented and the bug is also there, so it is a bug in the core functionality and I already added this to our issue tracker so that our development team takes a look.

I am, unfortunately, out of options at the time being and do not have anything more to add. The only thing that I can state is that you will need to wait for the upcoming official releases to have a fix regarding this.

Thank you for your understanding.

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