How to change the Divi Mobile Header Menu Button Color and put a circle in the background

by Jan 19, 2020Focus On, Projects0 comments

Sometimes you need to change the color of the menu in the mobile layout (the 3 lines called hamburger). And sometimes you want to add a sharp, for example a circle, in the background to avoid problems with colors.

The final effect you want is something like this:

 

If you try to change the color you find a problem, because the three lines in Divi use !important to set the color, so if you try to override the color you fail.

A method I found to change the color is to work on the specific element:

span.mobile_menu_bar:before {
  color: #000000 !important;
  }

 

Then if you want to add a circle in the backgorund you have to add:

.et_toggle_fullscreen_menu {
  background: #fff;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  }