Need help with hamburger menu

Support
#1

I just added this CSS to show the hamburger menu at all screen sizes. However, clicking on the menu doesn’t do anything anymore (no fly-out).

@media (max-width: 1900px) {
a.x-btn-navbar {
display: inline-block;
float: right;
}
.x-nav-wrap.mobile.collapse.in {
display: block;
}
.x-nav-wrap.desktop {
display: none;
}
}

Can provide the URL and login if needed.

#2

Hello @netherway,

Thanks for asking. :slight_smile:

Please use following code and let us know how it goes:

nav.x-nav-wrap.desktop {display: none;}

a.x-btn-navbar {display: block; float: right;}

.x-nav-wrap.mobile.collapse.in {display: block;}

Thanks.

#3

I added that to the code I already had, and it doesn’t appear to help. Clicking the button does nothing - at any screen size.

#4

Hey,

You can try to add the !important property after the rules and check it again. If the issue persists, please, provide to us your WP credentials and the website link in a secure note.

#5

Tried adding !important to every rule and it didn’t help. Here’s the WP credentials and URL:

#6

Hi There,

Upon checking your website it does work.

Please clean your browser cache and test it again.

Thank you

#7

That’s odd. I cleared cache and tried in multiple browsers but the menu fly-out still isn’t working. However, I tried on my iPhone (Safari) and it worked.

#8

Hi there,

You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes!

#9

Hi, was this issue sorted as I seem to be getting the same issue?

I’ve tried clearing the cache and testing on multiple browsers on multiple machines but the menu drop down “menu fly-out” doesn’t show on browser but does on the Mobile browser on Safari.

The code that is in the Edit Global CSS section on the customize section is below:

nav.x-nav-wrap.desktop {
display: none;
}

a.x-btn-navbar {
display: block !important;
float: right !important;

}

.x-nav-wrap.mobile.collapse.in {
display: block !important;
}

Cheers,

Jordan

#10

@WeAreMi,

Please provide us with your website URL so we can take a closer look.

Thanks.

#11

Thanks,

Details added below:

#12

Hi There,

Could you please try updating your custom CSS to this?

.x-nav-wrap.mobile {
    display: block;
}
nav.x-nav-wrap.desktop {
    display: none;
}

a.x-btn-navbar {
    display: block !important;
    float: right !important;
}

.x-nav-wrap.mobile.collapse.in {
    display: block !important;
}

Let us know how it goes!

#13

Thanks, This has work but menu fly-out appears straight away when page loads.

#14

Hi there,

This thread is a 3-month-old one and getting too long and it is getting hard for us to maintain and give the proper service. I totally understand that the issue is somehow related to the original post, but I urge you to open up a separate thread to follow up the case so we can focus on the case and give you the best service we can offer.

Thank you for your understanding and cooperation.