[Support request] Customize Hamburger Menu for Mobile

Home Forums Support [Support request] Customize Hamburger Menu for Mobile

Home Forums Support Customize Hamburger Menu for Mobile

  • This topic has 9 replies, 3 voices, and was last updated 4 years ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #816053
    Joseph

    I would like to customize the hamburger menu on mobile and remove the word “Menu” next to the hamburger icon so I can have the icon by itself. I also want it to be aligned to the right on mobile.

    #816069
    David
    Staff
    Customer Support

    Hi there,

    you can remove the word Menu from the Customizer > Layout > Primary Navigation –> Mobile Menu Label

    Do you want the site logo to the left and the mobile toggle aligned right so they are inline?

    #816081
    Joseph

    I was able to successfully remove the word “menu.” I would like the hamburger icon to be aligned right on mobile, but I want the menu items centered when the user clicks on the hamburger. How can I do this? Reference this site (mobile view): https://neilpateldigital.com/

    #816091
    David
    Staff
    Customer Support

    Try this CSS:

    .main-navigation .menu-toggle {
        width: auto;
        float: right;
        position: relative;
        top: -45px;
    }
    #site-navigation.toggled .main-nav li {
        text-align: center !important;
    }
    #816097
    Joseph

    That worked in terms of aligning the hamburger menu right, but the burger menu is now on top of my logo on mobile since my logo is centered on mobile. How can I align the logo left on mobile?

    #816100
    David
    Staff
    Customer Support

    If you want the logo aligned left and the menu aligned right. Then you don’t need the CSS.
    Go to Customizer > Layout > Header –> Enable the Mobile Header and give add the logo in the field provided.

    #816104
    Joseph

    Thanks a lot for your efforts. I think we are almost there – have a look at the mobile view for my site. I added the logo for the mobile menu in the customizer, however, as you can probably see, the logo still does not show up in mobile view.

    #816365
    David
    Staff
    Customer Support

    The mobile header logo takes its height from the Menu Item Height you have set in the customizer > layout > primary nav.
    Increase the mobile size to display the logo

    #836019
    Ighty

    Hi, I followed this CS, but the hamburger is now missing when because of the top: -45px, when using the sticky navigation on mobile, if I don’t use that CSS the hamburger will go on the far right with no spacing when sticky, while when at the top of the page, it is to low compare to the top of the page.
    Should I open another topic for this?

    #836357
    David
    Staff
    Customer Support

    Hi there,

    if you can raise a new topic where you can share your Site URL privately we can take a look. Each use case can be very different.

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