[Resolved] Mobile desktop/hamburger menu

Home Forums Support Mobile desktop/hamburger menu

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #980126
    Kle

    Hi there,

    I have two menus on my website and I wonder how can I make one of them to show up not in hamburger style but normal/desktop style when in mobile. I couldn’t find the settings for this in the customizer.

    Thank you.

    #980165
    David
    Staff
    Customer Support

    Hi there,

    this CSS for example will keep the secondary nav the same as desktop:

    @media (max-width: 768px) {
        #secondary-navigation .menu-toggle {
            display: none;
        }
        #secondary-navigation ul {
            display: block;
        }
    }
    #980186
    Kle

    Thank you David,

    it was the primary menu (thought it was the secondary) and changed #secondary-navigation to #primary-menu, it works but still shows the hamburger icon, and the cart icon appears twice now.

    I will put the domain address and password of my work in progress website in case you need it to take a look.

    #980217
    David
    Staff
    Customer Support

    OK so to remove the Menu toggle and additional cart – then target these:

    .main-navigation .menu-toggle,
    .main-navigation .mobile-bar-items {
        display: none;
    }
    #980223
    Kle

    Thank you David,

    This is what I put:

       #primary-menu .menu-toggle {
            display: none;
        }
        #primary-menu ul {
            display: block;
        }
    	.main-navigation .menu-toggle,
    .main-navigation .mobile-bar-items {
        display: none;
    }
    }

    Is that the best approach?

    Thanks: )

    #980231
    David
    Staff
    Customer Support

    You shouldn’t need:

    #primary-menu .menu-toggle {
            display: none;
    }

    But no harm it being there.

    #980233
    Kle

    Perfect, thank you David.

    One question, to change the font size/color of those menu items from the mobile whats the code?

    #980375
    Leo
    Staff
    Customer Support

    Menu font size can be adjusted in the customizer with the mobile toggle.

    Colors would be this:

    @media (max-width: 768px) {
        .main-navigation .main-nav ul li a {
            color: #fff;
            background-color: #000;
        }
    }
    #980781
    Kle

    Perfect, thank you Leo: )

    #981451
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.