Off canvas nav is in open state when navigating back in browser on mobile

Support
#1

Hi, I have a questions about the behaviour of the Navigation Off Canvas element when used on mobile.

When I select a page from the menu it navigates to that page fine. However, when I use the browser back button, I get taken back to the previous page that is still completely obscured by the Navigation Off Canvas element in open state.

This confuses my customers, because then they click browser back again in the hopes of seeing the page, but obviously that takes them away from the website completely to the new browser tab they started in .

In the this topic you provided a bit of JS to fix it, but that is not appropriate for the element I’m using.

I have also tested it on my other sites and it appears this is the standard way the element functions. Unfortunately this causes UX issues for my customers and I need to change it.

Many thanks for your help!

#2

Hi @designbythink,

Thank you for reaching out to us. It seems to be happening because of the cache. I ran some tests on my local setup and I’m not having this issue on my end. When testing your site it seems like when you press the browser’s back button , the cached version is served with the last state of the page. As a test disable all cache plugins and optimization services including server caching and see if this resolves the issue.

Let us know how this goes!

#3

Hi, thanks for your response. I have switched off all caching and even installed a brand new browser on my phone to check, but the issue remains.

To clarify, the issue is only present on mobile phones (both Android and iOS) and not on a desktop browser.

#4

Hi @designbythink,

I have checked your website on Android mobile device but didn’t find any of the problems you described here. Can you please provide any videos that help us recognize the problem?

Thanks

#5

Hi

Please see the video of what I experience: http://svsit.pt/test/WhatsApp%20Video%202023-08-17%20at%2009.36.32.mp4

The steps:

  1. I open the website on the Home page.
  2. I click on the hamburger menu to open up the off canvas navigation.
  3. I click on Services and the Services page loads.
  4. Then I click the back button on the browser / phone.
  5. I go back to the Home page where I have just been, EXCEPT now the off canvas navigation is still in its open state, obscuring all other page content and confusing my customers and visitors.
  6. I have to close the navigation manually in order to see the Home page again.

Uber menu WITH caching does not do the same, so I have to assume it is a feature of the Navigation Off Canvas element rather than a caching issue.

A similar support request was handled in 2019. The following code was suggested:

jQuery(document).ready(function($){
	if( $('.x-anchor-toggle').hasClass('x-active') ) {
		$('.x-anchor-toggle').click();
	}
});

However, this is obviously for a different element, and will not work on Navigation Off Canvas element. But this does make me think there is a fix and that it’s not a caching issue.

Is there anything else I can try?

#6

Hi @designbythink,

As a work around you can fix it by adding the following code in the Global JS section:

jQuery(document).ready(function($){
	if( $('.x-off-canvas').hasClass('x-active') ) {
		$('.x-off-canvas-close').click();
	}
});

But I strongly believe it’s specifically related to your setup as I have tried in my localhost and I don’t get this issue and you don’t need the above script. You can try updating your theme first to the latest version and see if this fixes the issue. If you have any other optimization service running temporarily disable it. These steps may resolve the issue.

Let us know how this goes!

#7

Hi, many thanks for the code. It doesn’t appear to make any difference, though.

Firstly, I have tried other menu plugins like Uber Menu, and they do NOT have the same problem, so I still think it’s an element-specific thing and not a caching issue.

Secondly, switching off all caching a) does not solve the problem and b) is obviously not a useful permanent solution, since I can’t keep all caching and optimisation switched off long term on any site.

I have tried this on different sites hosted with different companies and different levels of caching. The Navigation Off Canvas element behaves in this way all of the time.

Is there anything else I can try?

#8

Hey @designbythink,

There’s no bugfix specified in our Changelog but please try updating to the latest version currently 6.3.8. Version 6.2.7 is far from the current version. I tested the latest version and the Off Canvas is closed when you hit browser’s the back button.

Also, activate the parent theme please. And, deactivate all 3rd party plugins when testing.

#9

Hi, thanks for your response.

I have now done the following:

  • Updated Pro to the version
  • Activated the parent theme
  • Deactivated ALL plugins (not a realistic permanent solution)
  • Deactivated ALL caching (not a realistic permanent solution)
  • Viewed the website in a brand new installed browser with a completely cleared cache

None of this solved the problem.

Please could you show me a video of how it is working as it should on your side so that I can understand better what is happening.

#10

Hi @designbythink,

I have checked Navigation Off Canvas on multiple websites but didn’t find a similar issue. It seems that it might be on your website only, if you have already performed the test suggested by my colleague, I would request you please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.
And give us access in the secure note including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

secure-note
secure-note1040×250 15.3 KB

Thanks

#11

Hi, many thanks for your reply.

I will copy the site over to a staging server and send you the details.

In the meantime, I wish to be very clear that I have over 20 sites built with Pro or X that are hosted on various servers with various hosting companies. The Navigation Off Canvas ALWAYS behaves in exactly the same way no matter what website I test or what the caching situation is. So I very much doubt that it “might be on [my] website only”.

This is why I asked for a video so that I can see if we are even speaking about the same thing, because at this point I find it very hard to believe that I consistently see one thing while you guys consistently see something else. How is this even possible?

#12

Hi @designbythink,

The issue has been replicated on your website only. While the issue does not come up in the local or any other environment we tested. And that is why it seems the issue exists only with your setup. For further testing, we need a staging server as requested. Please let us know once it is ready.

Thanks

#13

Hi

I have set up a completely new, blank website with only 2 pages and the Navigation Off Canvas element. The problem still happens. I will add the details in a secure note. Please note the following:

  • There is NO caching or optimization on this site
  • There are NO third party plugins on this site
  • There is NO child theme on this site
  • There are NO third party themes on this site

NOTE: There has to be some sort of setting that controls this other than just caching, because I have no caching on this site.

Please also note that I have gone through the https://theme.co/showcase page and found that all of the following websites experience exactly the same problem on mobile, so it really isn’t just me or my website:

Please can you help me resolve this?

#14

From what I gathered that is how iOS wants to handle the back button. Resources online said the best UX approach is usually to implement a back button. You can’t realistically reset the state of the off canvas without hijacking every outbound click and waiting after it’s closed to move to the next page. You can try the script below it’s similar to what we would do. We’ll get something similar into theme options as a setting that would probably be off by default in a later release.

// Click handler for closing off canvas
// and all other toggleable elements
document.body.addEventListener("click", function(e) {
  // Not a link
  if (!e.target.href) {
    return;
  }
  
  // Prevent normal link flow
  e.preventDefault();
  e.stopPropagation();
  
  // We are closing these
  const state = false;
  
  // Loop through all elements with the toggleable attribute
  Array.from(document.querySelectorAll(`[data-x-toggleable]`)).forEach(toggleable => {
    // Get toggle ID
    const id = toggleable.getAttribute("data-x-toggleable");

    // Close each toggleable
    toggleable.dispatchEvent(
      new CustomEvent('tco-toggle', { bubbles: false, detail: { state, id }})
    );
  });

  // Jump to next page after a bit of a wait
  setTimeout(function() {
    location.href = e.target.href;
  }, 25);
});
#15

Hi, thanks so much for your reply.

  • I see the problem on both iOS and Android devices.
  • It’s also important to note that I only see the problem when viewed on an actual PHONE, and not on mobile view on a desktop.
  • On mobile view on a desktop the problem does not occur. This might provide some insight as to why the problem occurs at all.
  • The reason why I’m so serious about this is that most of my clients’ visitors view their websites exclusively on mobile devices.
  • While I agree that using the browser back button as a navigation tool is not a great idea, we can’t control the way people in general use the internet. Users WILL press the browser back button, so we have to give them the best experience even when they behave in ways we don’t expect.
  • I have never encountered another website built in a different theme that has the same problem. None of the websites on the Divi showcase has the problem, so I have to believe that it has something to do with X / Pro and their elements that can be fixed.

I have tested the script you provided on my tester website, but it had no effect.

For the moment I have changed to using Uber Menu (although I don’t really like it), because the same does not happen with their responsive mobile menu.

Please consider rolling out an update that includes a fix for this, because it really isn’t a caching issue and is not an good way to function for a theme that is mobile first.

2 Likes
#16

Hey @designbythink,

I have replicated the issue in iOS but not on Android. Here’s a video https://imgur.com/a/NnRBLlb

I’ll report this to our dev team.

#17

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