Mobile Menu Auto-Expand

[VitalityCBD]

We noticed a much higher bounce rate on the homepage of our site in mobile view.
We’re assuming it may have to do with people not understanding the menu is expandable.
I’d like to have the menu load already expanded on mobile views as an experiment to prove or disprove that theory.
Can anyone help me with bode or instructions on how to make that happen?
Thank you!

[ruenel]

Hello Jesse,

Thanks for posting in!

First and foremost, I noticed that there is a JS error in your site (check secure note). That is because you added incorrect JS code. Please have it updated and use this:

<!-- Global site tag (gtag.js) - Google Analytics -->
</script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-125068227-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-125068227-1');
</script>
<script type="text/javascript" src="https://cdn.ywxi.net/js/1.js" async>

And if you want to expand the menu in smaller screens upon the page is loaded, you may add this JS code as well.

(function($){
  $(window).on('load', function(){
    $('#x-btn-navbar').trigger('click');
  });
})(jQuery);

We would loved to know if this has work for you. Thank you.

[VitalityCBD]

The Google Analytics JS fix you provided starts with an End Script and ends with an Open script… is that on purpose? I don’t understand.

for the second code, do i have to add anything to that? like an opening and closing set of tags? I’m afraid i don’t know any javascript i just do what tutorials and step by step blogs tell me to do regarding JS. I added that code you provided “as is” to the global JS after the GA script but it doesn’t appear to have had any effect on mobile views. The condensed menu doens’t automatically open in mobile.

[ruenel]

Hello Jesse,

The custom JS when displayed in the front end will be wrapped with <script></script> already. So when you add a custom scripts that is also wrapped with the script tag, we have to closed it first or else it will become and invalid JS code which will create issues on the site. Actually you are not supposed to insert that code in that section. But since you already did, please insert the code “As is”, do not add any opening or closing tag anymore.

Hope this explains it briefly.

[VitalityCBD]

No… I still don’t know what you’re saying. you said not to insert it, but that i already did, and to leave it where it is, as it is, and where it is and as it is doesn’t do what I need it to do. The menu does not automatically open on mobile screens.

[ruenel]

Hello There,

This is the correct JS code for your site:

(function($){
  $(window).on('load', function(){
    $('#x-btn-navbar').trigger('click');
  });
})(jQuery);
</script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-125068227-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-125068227-1');
</script>
<script type="text/javascript" src="https://cdn.ywxi.net/js/1.js" async>

The opening and closing script tag is no longer needed.

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

[VitalityCBD]

Sorry, We’re not talking about the GA script anymore. This post was originally asking how to make the condensed menu on mobile view appear automatically expanded when mobile users visit the website. I’m trying make it so the navigation menu doesn’t require a click to expand on mobile. You noticed an error in my GA script and offered a fix, which I appreicate, but that’s not what this post was about.

[rad]

Hi Jesse,

It’s for both issue since you added the GA along with menu specific script at the same time. So the fix is offered for GA too since it affects the other script. Else, Please remove all of that and just add this to Theme Options > JS

(function($){
  $(window).on('load', function(){
    $('#x-btn-navbar').trigger('click');
  });
})(jQuery);

Thanks!

[VitalityCBD]

Strangely enough, it randomly appears to be working now. It didn’t work when i last posted a reply. But it is working now, and i haven’t yet put in this newer change.

Can you do be a huge favor and look at both of the codes again, the GA and this one for the mobile menu expansion,a nd see if they are fine? I honestly wouldn’t be able to tell anything.

[paul.r]

Hi Jesse,

I checked and can see that the scripts have been added correctly and working fine…

Have a great day!