[Resolved] Mobile menu does not work in desktop view

[Q]

Hi there,

I am having an issue with getting the mobile menu to work in desktop view. It works in tablet and phone view.

I have my topmenu ticked for both Primary Menu and Slide Out Menu, in Customize I have set the Slide Out Navigation to both.

Another funny thing is the Primary Menu and Slide out Menus both show in the desktop view, but not in tablet or mobile views.

Can you direct me to the correct method.

Thanks
Q

[Leo]

Hi there,

If you only want the slide out toggle on desktop, try creating a a new menu with no menu items in it and set it primary navigation.

Let me know if this helps.

[Tom]

That’s strange, it should be working.

Just to make sure, your setting in Customize > Layout > Slide-out Navigation is set to “Both”, correct?

[Q]

Hi Leo,

That did’nt work. On the desktop I just have the hamburger icon but when I click it nothing happens, no slide out.

I have created two menus now. Primary navigation(top mennu) with no menu items in it and Slide out Navigation (mobilemenu) with the menu items in it.

Still works in tablet and mobile views.

Thanks
Q

[Tom]

Can you try turning off the mobile header just to test?

[Q]

Hi Tom,

Yes, my setting in Customize > Layout > Slide-out Navigation is set to “Both”.

I have also now disabled the mobile header in Customize > Layout > Header > Mobile Header is set to Disable.

Still no luck with the Slide-out Navigation.

Thanks
Q

[Tom]

Can’t reproduce this issue on my end.

Can you try deactivating your other plugins one by one to see if any of them are causing a conflict?

[Q]

Hi Tom,

I will give it a go and let you know the results.

Thanks again.
Tom

[Q]

Hi Tom,

I have deactivated my other plugins one by one to see if any of them are causing a conflict and deactivated all of them just leaving GP active but still the same result with the mobile menu.

When I hover or click on the hamburger icon I get, my website address/#generate-slideout-menu don’t know what this means or this helps.

Thanks
Q

[Tom]

Can you try removing the smooth scroll code you added in GP Hooks?

[Q]

Hi Tom,

Yes that worked!!!

I followed your instructions and disabled the smooth scroll code in GP Hooks.

Is it best to move the smooth scroll to another GP Hook area or just disabled the whole code.

Thanks again Tom, much appreciated.

Thanks
Q

[Tom]

Can you show me the code you were using? I should be able to tweak it so it will work with the slideout menu 🙂

[Q]

Hi Tom,

Here is the script

<script>
jQuery(function() {
jQuery(‘a[href*=”#”]:not([href=”#”])’).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {
var target = jQuery(this.hash);
target = target.length ? target : jQuery(‘[name=’ + this.hash.slice(1) +’]’);
if (target.length) {
jQuery(‘html, body’).animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>

Thanks
Q

[Tom]

Give this a shot instead:

<script>
    jQuery(function() {
        jQuery( 'a[href*="#"]:not([href="#"]:not([href="#generate-slideout-menu"))').click(function() {
            if (location.pathname.replace(/^\//,") == this.pathname.replace(/^\//,") && location.hostname == this.hostname) {
                var target = jQuery(this.hash);
                target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    jQuery('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            } .  
        });
    });
</script>

[Q]

Hi Tom,

That worked!!!!

Thanks again, much appreciated.

[Author]

Posts