Mobile menu breakpoint issue

chrismcb6 · October 2023

Hello,

When a custom menu breakpoint is set for smaller screens, some strange output is seen around this value for the Side_slide functionality.

This is using the original/default header system (with Elementor in use) - not BeTheme.

The menu breakpoint is set at 941px and a "mobile menu" is in place.

At 940px viewport width, the menu shown is not the selected "Custom menu" and the menu itself doesn't have the top margin/padding to stay clear of the search icon:

Only at 766px viewport width does the correct menu show and spacing for the search icon work.

I note in the menu.js file that the default mobileInit value is set to 768. Within the source the `var mfn` data does show 941. Not sure if there's an issue in its implementation, or something else?

You can see this in practice at https://tinyurl.com/bd5n788y

Can you please advise how to get the view of the 767px menu shown all the way up to the 940px breakpoint?

Thanks

Phil · October 2023

Hi,

I have passed it to the dev team. To prevent incorrect display, use the following CSS code:

@media screen and (min-width: 767px) and (max-width: 941px) {
 #Side_slide .menu_wrapper {
   position: unset!important;
 }
}

However, assigning an appropriate menu requires us to fix it in files, which should be available in the upcoming update.

Best regards

chrismcb6 · October 2023

Thank you.

Please let me know when resolved so I can proactively update for the client immediately.

If it's a quick fix and the code changes can be shared, I'd be happy to modify the files before the update is available.

Phil · October 2023

If I will get a solution for that before an update, I will let you know.

Best regards

Mobile menu breakpoint issue

Comments

This website uses cookies