[Support request] Help with mobil menues

[tsecher]

Hi there,

We are moving forward with our future website but have some trouble we need help solving. With the mobile menu enabled our website looks really strange on mobile devices. See http://www.gomezzo.dk/test2 – the reason for this is that we on desktop viewed website use the primary menu at the top (in order to get the search field there – right now only “Parents”) and the secondary menu as the one appearing as the main “Home, About us, Contact”. On the mobile layout, it looks really strange. Any tips and trick of how to make it look amazing on mobile devices as well? All help is highly appreciated – we are quite new at this but we start to get a hang of it and we love both GP and Elementor.

// Thomas

[Leo]

Hi there,

Would it work if we hide the secondary menu on mobile or do you want that showing?

One thing you can try is to use the combination of these three built in classes on menu items: hide-on-desktop hide-on-tablet hide-on-mobile in the custom classes field: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Let me know.

[tsecher]

Hi Leo. The secondary menu doesn’t really work on a mobile device as it looks now. Perhaps we could set it up so that the secondary menu doesn’t show on the mobile devices and then we could add menu items that only shows on mobile devices in the primary menu. Would you move the entire menu om mobile devices in the css? How would you write it?

Again the primary menu in the system is the topbar menu and the secondary is the one that looks like the main menu on the site (easy to get confused by this).

[Leo]

You can hide the secondary navigation on mobile with this CSS;

@media (max-width: 768px) {
    .secondary-navigation {
        display: none;
    }
}

Then you can add hide-on-desktop and hide-on-tablet classes to the menu items that only show on mobile:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

[Author]

Posts