Change hamburger color on one page but not after clicking on it

Site URL: https://www.debrarbryson.com

Hi Everyone, 

Would someone be able to help me write some code to make the hamburger lines white instead of black on the home page? I tried the below, but it didn't work.

button.header-burger-btn.burger {
  color: white !important
}

Also, please note: could you make the code apply to this page when the hamburger is in = format, not X too when you click on it? My mobile menu background is white so it will disappear if both are changed to white. 

Thank you! 

20 hours ago, senecabryson said:

Site URL: https://www.debrarbryson.com

Hi Everyone, 

Would someone be able to help me write some code to make the hamburger lines white instead of black on the home page? I tried the below, but it didn't work.

button.header-burger-btn.burger {
  color: white !important
}

Also, please note: could you make the code apply to this page when the hamburger is in = format, not X too when you click on it? My mobile menu background is white so it will disappear if both are changed to white. 

Thank you! 

Is it the result you want to achieve?

You can add to Home > Design > Custom Css

.header-burger-btn.burger .burger-inner >div {
  background-color: #fff !important;
}

.header-burger-btn.burger--active .burger-inner >div {
  background-color: #000 !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

@bangank36 We are getting there! I need the = to be black on all of the other pages. Is there a way to make the code apply to the homepage only?

Thank you for your help!

@bangank36 Never mind! I put the code in the Home header instead of the main CSS area...problem solved 🙂 I appreciate you!