Need help? Check out our Support site, then


Change color of burger menu

  1. Hi all.

    I running the Gema theme for my website and want
    to change the color of the burger menu and the big
    cross in the right upper corner, from black to red.
    Dont now which CSS code to write for that.
    This menu can be seen on mobile device and tablets only.

    /Thomas :)

    The blog I need help with is tommablog.com.

  2. Hi tommablog

    To change the color of the menu you need to add the code given below

    ul#primary-menu li a {
        color: white;
    }

    Hope this helps you, I am trying for the cross button solution too.

  3. Hi shubhamgmath.

    Thanks for answer. Though it didn’t. It is the 3 lines which i indicate the burger menu i want to change the color from black to white. :)

  4. Hi @tommablog, that image for the hamburger menu is actually an svg image, so we can't really change the color of it with CSS. We could add a red background to it with this (I pulled the red from your logo).

    .menu-toggle.menu-open::before {
        background-color: #F91A43;
    }

    Alternately you could create your own image for that hamburger in the color you desire, upload it to your media library and then replace URL_OF_IMAGE between the quote marks with the URL of that image.

    .menu-toggle.menu-open::before {
        background: url("URL_OF_IMAGE") no-repeat center center;
    }
  5. Hi thesacredpath. :)

    Thanks for your reply!

    Radu from Pixelgrade showed pointed me in the right direction, and I found this code which made the trick:

    .menu-toggle.menu-open:before {
    filter: invert(1);
    }
    .menu-toggle.menu-close:before {
    filter: invert(1);
    }

  6. Oh, cool, I didn't think of the invert filter. Thanks for replying back in this thread and reminding me. :)

  7. You’re welcome. And thanks again for your reply. :)

You must log in to post.

About this Topic

Tags