Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Support request] change hamburguer menu icon size

Home Forums Support [Support request] change hamburguer menu icon size

Home Forums Support change hamburguer menu icon size

  • This topic has 17 replies, 5 voices, and was last updated 1 year ago by Leo.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #578617
    anabella

    Hi, I´d like to make the hamburger menu icon a bit bigger.
    How can I do that?

    Thanks!

    #578673
    David
    Staff
    Customer Support

    Hi Anabella, the hamburger icon is set to the Primary navigation font size, if you want to set it independently then you can do this:

    .menu-toggle:before {
        font-size: 18px;
    }
    #578687
    anabella

    Hello David,

    Thanks, done!
    One last question: how can I set specific padding for mobile main navigation?
    I´m using this CSS, which makes the menu look great on desktop, but it´s too much for mobile:

    .inside-navigation {
    padding-bottom: 5px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top:30px

    Thanks!

    #578722
    David
    Staff
    Customer Support

    Hi Anabella, you can use a media query like so:

    @media (max-width: 768px) {
        .main-navigation .inside-navigation {    
            padding: 30px 30px 5px 30px;
        }
    }

    Thats also the shorthand for padding different sizes, the order is TRBL

    #578775
    anabella

    Hello David,

    Thanks! I tried it but when I set the padding it not only affects mobile version but also desktop.

    #578777
    David
    Staff
    Customer Support

    Hi Anabella, apologies i made a mistake with the code, i have updated above.

    #578787
    anabella

    Hi David, thanks. This is what happens now: when I set the new padding I can see the changes on the preview, but this changes aren´t reflected when I checked the website on Chrome DevTools Overview or on my phone.

    #578790
    David
    Staff
    Customer Support

    Hi Anabella, try clearing the autoptimize cache

    #578796
    anabella

    I did, but it doesn´t work. I also tried deactivating the autoptimize plugin, but it still looks the same.

    #578803
    David
    Staff
    Customer Support

    Hi Anabella, sorry i’m having one of those days i edited the code again. can you retry.

    #578806
    anabella

    Perfect!! It´s working now 🙂

    Thanks for your help David!

    #578811
    David
    Staff
    Customer Support

    Phew…. thanks for your patience… glad we got it working

    #700536
    David

    Hi David,

    With this code we can change the tablet and mobile version but… How about desktop?

    On my desktop version I have the hamburguer menu (only) and I would like to change.

    Thank you 🙂

    #700612
    David
    Staff
    Customer Support

    Hi there,

    the padding CSS you could do either of these:

    /* Apply to all devices */
    .main-navigation .inside-navigation {    
        padding: 30px 30px 5px 30px;
    }
    
    /* Apply to desktop only */
    @media (min-width: 1024px) {
        .main-navigation .inside-navigation {    
            padding: 30px 30px 5px 30px;
        }
    }
    #700744
    David

    Hi David,

    Thank you for the answer 🙂

    forgive me if I have not expressed myself well. I was referring to change the size of the menu icon (hambuguer) in the desktop version.

    Is a different code?

    Thanks!

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