Change color of burger menu

• 

  tommablog · Member · Feb 11, 2018 at 10:11 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  shubhamgmath · Member · Feb 12, 2018 at 7:56 am

  • Copy link

  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.

• 

  tommablog · Member · Feb 12, 2018 at 8:08 am

  • Copy link

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

• 

  thesacredpath · Member · Feb 12, 2018 at 8:35 pm

  • Copy link

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

• 

  tommablog · Member · Feb 13, 2018 at 12:42 pm

  • Copy link

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

• 

  thesacredpath · Member · Feb 13, 2018 at 7:52 pm

  • Copy link

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

• 

  tommablog · Member · Feb 13, 2018 at 9:02 pm

  • Copy link

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