[Kenta]

Hello developers,

This time I would like to know how to customize hamburger icon (menu navicon of three lines). I just want to change its size and shift its position a little bit through child theme responsive.css file.
Child theme responsive.css has been created already.

I see .mobile-menu-barwould be related to the icon customization because it was subject to color change (from default gray to black now).

My website is http://kenta-kiyomiya.com

Best regards,
Kenta Kiyomiya

[Mahesh]

Hi @Kenta,

For changing size of hamburger icon, add the following CSS.

.mobile-menu-bar:before {
    font: 25px/1 Genericons;
}

Shifting position depends on where you want to shift the icons.

Regards,
Mahesh

[kate-upton]

To add the icon before the word menu, you can do this:

.sm-user-ui .sm-h5:before {
font-family: ‘SmugMug Icon Font Regular’;
font-size: 15px;
content: ‘ \e039 ‘;
}

Not sure i’d replace the word… might not be too obvious what it does. Also I haven’t thoroughly tested that code... it works on your mobile homepage but no guarantees about other parts of your site.

[Author]

Posts