Change the Centered Menu "Select Page" Background Color

The Divi Theme comes with several different header menu formats, including a "Centered" and "Centered Inline Logo" format. When either of these formats are used, the mobile version of the header has a long box which contains the words "Select Page" and a hamburger menu icon. If you'd like to change the color of the box's background color, here's how.

Manually changing the background color of the box

You can change the background color of the box using this CSS:

In this example, I've set the background color to white (#fff). The default is an almost transparent black given by the color code rgba(0, 0, 0, 0.05).

If you'd like to completely hide the box, set the background color to be fully transparent, e.g: rgba(0, 0, 0, 0)

Changing the background color of the box in Divi Booster

Divi Booster 2.7.0 onwards includes an option to set the background color of the "Select Page" box. You can find the option under "Header > Mobile Header > Change centered menu Select Page background color".

The option has a color picker that lets you choose the color you want. Note that it is initially set to the default color of black with a high level of transparency. The transparency is controlled by the right-most bar in the color picker. If you want a solid color (no transparency), move this bar's slider to the very top. If you want to hide the "Select Page" box altogether, move the bar's slider to the very bottom.

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

Submit a Comment

Your email address will not be published. Required fields are marked *