[Resolved] Mobile menu design

Home Forums Support [Resolved] Mobile menu design

Home Forums Support Mobile menu design

Viewing 11 posts - 16 through 26 (of 26 total)
  • Author
    Posts
  • #556190
    Tom
    Lead Developer
    Lead Developer

    Let’s remove all of the menu related CSS for now – but be sure to back it up in case we need to re-add it.

    Then I would up your menu item height to something like 50px in “Customize > Layout > Primary Navigation”.

    #557453
    Verónica

    Hi Leo!

    Al menu related CSS is commented now and the menu item height changed!

    #557608
    Tom
    Lead Developer
    Lead Developer

    This CSS is still adding space to the top and to the right of the menu, you may want to remove it:


    @media
    only screen and (max-device-width: 1600px) and (min-device-width: 1200px) {

        .inside-navigation {
            margin-top: 50px;
            margin-bottom: 0px;
            margin-left: 0px;
            margin-right: 45px;
        }
    }

    Then on mobile, you can center the logo like this:

    #mobile-header .site-logo {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        margin-right: auto;
        margin-left: auto;
    }
    
    #mobile-header .menu-toggle {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    That should get you quite a bit closer to their layout.

    #558858
    Verónica

    Thanks so much Tom!

    I’ve applied your rules and some own ones and now the layout is more likely the one I want to achieve!

    Only three things I couldn’t resolve and maybe you can help me! Instead I have selected the navigation logo in both static and sticky menu, when I scroll down, the logo dissapears. I was searching for the rule which is hidding it, but with no luck.

    I’d like to use the mobile menu (with toogle and logo) also for tablets. Do you know how to do it?

    And the last one… when I open the mobile menu its empty! Why?

    Thanks again for all your help!

    Kind Regards,

    #559693
    Tom
    Lead Developer
    Lead Developer

    1. Try increasing the height of the menu when it becomes sticky. 20px isn’t tall enough to show the logo.

    2. This should do it: https://generatepress.com/forums/topic/mobile-header-size-tablet-view/#post-541540

    3. Is there a menu set to the “Slideout” theme location?: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location

    #559917
    Verónica

    Thanks so so much Tom! With your help I’ve resolved the first and the third issue! Then only one that it doesn’t work as expected is the second one, where no toggle box is shown. Instead of it, the menu is under the logo now.

    #560223
    Tom
    Lead Developer
    Lead Developer

    Is the CSS still added? I’m not seeing it. Are you using GP Premium 1.6.2?

    #560523
    Verónica

    Yes, it is. https://imgur.com/a/KdWu2jW

    I’m using 2.0.2 version

    #560624
    Tom
    Lead Developer
    Lead Developer
    #560873
    Verónica

    Yes! It works perfectly!!! Thanks so so much!!!

    #561074
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad I could help 🙂

Viewing 11 posts - 16 through 26 (of 26 total)
  • You must be logged in to reply to this topic.