The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.

Learn More

The Divi Theme’s mobile layout features a menu button on the header (the three horizontal lines that Clare from the Divi theme users group calls the “hamburger”! Clare was trying to change its color, but finding it quite uncooperative.

The problem with the hamburger is that Divi already uses !important when it sets the color. If we attempt to override the color, even if we specify it as !important, it may not work. The browser, not knowing which is the most important, may take the Divi-defined rule instead of ours. One way to override this is to make our CSS rule more “specific” than Divi’s. That is we need to describe more exactly the element we’re targeting, so that the browser will choose to apply our rule instead. The following code does so by including the information that the .mobile_menu_bar is a “span” element:

span.mobile_menu_bar:before {
    color: red !important;
}