Messed up mobile menu

Hello @lenavigateur ,
I hope you are doing well!

I have checked the screenshots and understood the issues. For some reason, the Nav Menu of your site is not working properly on Mobile Devices. In my development environment, the Nav Menu widget of ElementsKit is responding properly on any device. Can you please share the link to your site for further inspection? It will help me a lot to figure out the root cause and also in providing you with a solution ASAP.

Looking forward to your response and we are always here to assist you.

Best Regards,
Prosenjit

Hello Prosenjit,

Here’s the link to my site: https://casaconti-angeleccia.com/

Thanks!

Hello @lenavigateur ,
I hope you are doing well.

I have checked your site and noticed that the Menu on Mobile devices is appearing properly. I haven’t found any issues there. Kindly check this screenshot for a better understanding.

Since the Nav Menu is appearing properly, Will you please try clearing the caches from your site and browser as well? Please let me know if you need further assistance in this matter. I will be happy to assist you.

Best Regards,
Prosenjit

Thank you Prosenjit, but in landscape mode on mobile, here is what I see: a grey zone on half the page.

Also, I wouldn’t want the menu to be an extra layer above the site, but a dropdown list going down: how can I achieve it?

So I am having a similar problem with my development site that I would like to fix for mobile menu not showing appropriately. In desktop it shows nicely, but not in mobile at all. Cant scroll through the menu at all. Please look at it.

https://michaelw356.sg-host.com

Okay it looks like the slider is overlaying the menu. How can I fix this issue? The me u in mobile is opening but I literally have to move my finger to right to see the menu but if released the me u is covered again by the slider. I am using themerex briny theme, with element or as theme builder and your ElementsKit which I love what it can do. Just doesn’t allow me to see it as the home page slider is covering it up.

header {
    z-index: 999999 !important;
}

I used this and it is working, well I mean I can actually see menu in mobile now. Not sure it is correct that code but came across it.

So looks like I only want it to be in mobile version on always for all headers, as in desktop it covers my wordpress dashboard menu now.

Hello @lenavigateur,
Hope you are doing well!

I understood the issue you are having with. We have been able to detect this issue with some of the Tablet devices on Landscape mode. However, the team is already aware of that, and am pleased to inform you that a Workaround for this issue is available now.

In order to solve the issue, please copy the CSS code from below and paste it to the Appearance > Customize > Additional CSS section.

@media (max-width: 1024px){
    .elementskit-menu-overlay {
        left: -100% !important;
    }
    .elementskit-menu-offcanvas-elements.active {
        left: 0 !important;
    }
}

I hope that will solve the issue.

Regarding another query about changing the Mobile Menu layout, currently, the Mobile Menu is set to appear from the left side and this is the default layout. We haven’t added any functionality yet to change that layout and for that reason, the way you want the Menu to appear on Mobile Devices is currently not possible. However, I have taken this as a feature request and it will be forwarded to the Product Team for further evaluation.

Let me know if there is anything else you need help with. We are always here to assist you.

Best Regards,
Prosenjit

Hello @saltywd ,
I hope you are doing fine.

Will you please create a new support Thread by mentioning all the issues you are having in brief? To avoid possible confusion in this thread, it is better to create another support thread. We will check everything and help you in finding a solution ASAP!

Best Regards,
Prosenjit

Thank you, now I would like the menu items to be centered, not left-aligned. How can I achieve that?

Hello @lenavigateur ,

The website URL you shared earlier I have visited it and after visting the website, it’s redirecting me to login page. That is why I can’t check the website for further inspection.

Please share a specific page or resolve the issue then we will check the issue properly.
?
Regards,
Benjir

Hello Benjir,

Yes the site is private most of the time because it is not ready but I made it public again so that you can have a look.

Thank you

Hello @lenavigateur ,
I hope you are doing well.

I understood how you want to see the Mobile Menu. Currently, this only can be done by applying custom CSS code as the controller for aligning the Mobile Menu items isn’t been added yet. To do so, please copy the CSS code from below and paste it to Appearance > Customize > Additional CSS section.

@media (max-width: 767px){
#ekit-megamenu-menu-casa-conti.elementskit-menu-container {
    justify-content: center !important;
    align-items: center !important;
}
}

I hope that will help. Let me know if there is anything else you need help with.

Best Regards,
Prosenjit

Hello and thank you Prosenjit,

I added the code to the additional CSS, unfortunately the menu items are still left-aligned on mobile.

Best regards