[Havice DParticipant]

I’ve adjusted the mobile menu breakpoint so that it switches to the mobile menu at 1023 and below. The mobile menu displays as expected, however, it seems that there is no slide down animation when clicking the mobile menu button at 979-1023. Looking at the source while clicking on the menu, I saw a brief flash of another css class called .collapsing being applied to the menu. I reviewed the CSS for that class and this is what applies the animation, but the class is not being applied to the menu at the adjusted breakpoint, so the animation is lost. How can we get this to work?

[Havice DParticipant]

I need to revise my request. So, it does appear that .collapsing is applied at the new breakpoint but the animation doesn’t work. I checked the CSS to make sure the .collapsing class is available across all browser widths and it is.

[Rue NelModerator]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[Havice DParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

Upon checking your website I could not replicate the issue on my end.

What browser and device you are using while experiencing this issue?

Let us know more details,

Thanks

Joao

[Havice DParticipant]

I’m using Chrome on a PC desktop, and I duplicated this on my Mac and my PC laptop. I’ve adjusted the mobile breakpoint so that the mobile menu appears earlier than the 979 pixel default set by x-theme. This part works correctly. The animation is what doesn’t work at the new breakpoint (1023px). Note how at 980-1023, when you click on the hamburger (mobile) icon, the mobile menu appears abruptly without any animation. Now, resize your browser to 979, the x-theme default, or anything lower than that. Click on the menu icon and the menu slides down. Click on it to close the menu and the menu slides up to close. These two animations aren’t being triggered on the click event at the new breakpoint for the menu.

Thank you.

[Paul RModerator]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 1023px) {
 body .x-navbar .x-nav-wrap.mobile {
    display:block;
    height:0;
}

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

Hope that helps

[Havice DParticipant]

Perfect. That worked. Thank you!

[NicoModerator]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts