Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #84941

    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

    Best regards,
    Kenta Kiyomiya


    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.



    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘How to customize "hamburger icon" on mobile devices’ is closed to new replies.