Change color of the 3-bar Menu button


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Last Reviewed: 7-Apr-15 (3.3.15) 3.1.* 3.2.* 3.3.*

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



11 thoughts on “Change color of the 3-bar Menu button

  • Anamika

    Hi Dave,

    I am looking into bootstrap examples and the snippet u provided.3 Bar menu option appears as soon as we minimize screen size but I need that option in my left panel by default.

    Thanks,
    Anamika

    • Dave Bardell Post author

      Hi Anamika

      I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.

    • Dave Bardell Post author

      In the process of updating all my Snippets, came across your post.

      In CSS, background-color is a subset of background so either should work. The snippet works for me as it is written.

      Thanks for your feedback and sorry it took so long to respond.

    • Dave Bardell Post author

      The full CSS for that button is:

      Changing background-color: #819A4C; (green.css) will change the 1px border.
      Changing background-image: linear-gradient(to bottom, #92AE57, #687C3C); (green.css) will change the color of the button

  • Ashish

    when i am changing the menu from Aboutus. the hoghlighted Home is not changing, i mean, on about us page, About us on menubar is to be highlighted but its not happening, Only HOme raming highlghtd. I ll be glad if anyone could help!!

  • Mike

    I have a dark colored website with white text. I’ve fixed just about everything in .css to my satisfaction (with the help of these excellent code snippets) except the background of the 3 bar drop down mobile menu is still light colored so i can’t read the menu text on a mobile device. Is it possible to adjust the background of this dropdown with .css. Thanks!

Comments are closed.