Mobile landscape showing 2 lots of menus

  • Hi, My client site had some updates and since then I’ve had strange issue on the Header landscape on mobile phone viewing for client site.

    It is showing 2 lots of MENU in the Storefront theme.

    I haven’t needed to edit this client site for years, but I remember that Storefront has its own menu but on the mobile it would always show 2 lots of menu, one strange and other the one I want. One had to be hidden with CSS years ago to display ONLY the menu that was the correct one.

    What is the correct viewport for mobile landscape device?

    Would this be correct to use to EDIT the section:

    @media only screen and (min-width: 1024px) and (max-width : 1400px)and (orientation: landscape) {

    but I assume I need a max-width: also in here.

    Anyway now I’m seeing both these menus on Mobile landscape, so I need to rectify it.

    Mobile portrait is fine, and Ipad landscape is fine.

    What’s the best software tool to be able to see the website on different devices (as obviously I don’t own All Ipad, and all the various sizing of devices) to test on all devices.

    If I have the 3rd party tool to see the site on all devices, I could then do some CSS coding to fix the issue.

    Please advise how I can remove and whether it is standard for Storefront to show this ?

    If I am using Mega Menu, does that cause additional issues. We have been using Mega Menu also for years, so have never really had issues up until now.

    Issue on Mobile landscape for now.

    Thanks

    Kristin

Viewing 1 replies (of 1 total)

  • Hello @kristinubute,

    I understand that you’re experiencing an issue with double menus appearing on the mobile landscape view of your client’s site.

    Storefront has its own menu but on the mobile it would always show 2 lots of menu,

    Storefront does indeed have its own menu, and it should not typically display two menus. You can find an option to disable both the primary menu and the mobile menu from your WordPress dashboard under Appearance > Customize > Menu > Menu Locations > Uncheck handheld menu and primary menu.

    If the image is not visible, please use the link attached: https://snipboard.io/7FxfjB.jpg

    This will help display the menu that was added using your Mega Menu plugin.

    What is the correct viewport for mobile landscape device?

    For the viewport, the values you provided are generally used for tablet devices. For mobile devices, a common viewport is @media screen and (max-width: 767px). You might want to adjust this according to your specific needs.

    What’s the best software tool to be able to see the website on different devices (as obviously I don’t own All Ipad, and all the various sizing of devices) to test on all devices.

    To view your website on different devices, you can use built-in browser tools like Chrome’s Device Mode for testing. There are also online tools like Responsinator that simulate various devices and screen sizes.

    If I have the 3rd party tool to see the site on all devices, I could then do some CSS coding to fix the issue.

    As I’ve mentioned above, you can manually disbale the mobile menu from Storefront by checking the menu locations from Appearance > Menu > Menu locations. This should fix the issue without having to add custom CSS.

    Should the issue persist, please try disabling all plugins, leaving only WooCommerce and Mega menu and check the mobile menu.

    Let us know how it goes.

Viewing 1 replies (of 1 total)
  • The topic ‘Mobile landscape showing 2 lots of menus’ is closed to new replies.