Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] Help with mobil menues

Home Forums Support Help with mobil menues

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #356685
    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

    GP Premium 1.3.1
    #356716
    Leo
    Staff
    Customer Support

    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.

    #357723
    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).

    #357737
    Leo
    Staff
    Customer Support

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.