change hamburguer menu icon size

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;
}

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!

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

Hello David,

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

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

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.

Hi Anabella, try clearing the autoptimize cache

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

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

Perfect!! It´s working now :)

Thanks for your help David!

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

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 :)

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;
    }
}

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!