Create Better Divi Headers

Make the Transparent Menu of Divi Colored on Certain Pages

by | Jan 6, 2017 | 22 comments

Recently I saw a help request on one of the Divi community groups on Facebook in which the user was asking about how to make the menu background colored for posts while keeping it transparent for the rest of the site. Unfortunately, Divi doesn’t have such a feature, it uses the same menu for the whole site and if you change its background color in Theme Customizer this change applies everywhere.

But this can be done easily by applying a simple custom CSS code snippet which I am providing in this short post and not only for the single posts but for the archives, blog, search results, 404 and project pages too. All these pages have their unique CSS classes which makes targeting them super easy. Below you’ll find these little snippets, enjoy using them.

Please note that these snippets apply for Primary menu but not the Fixed menu, if you want both of these menus to be affected then simply remove the :not(.et-fixed-header) part from the CSS selectors.

Blog Page

Your Subtitle Goes Here
/*** Blog page header bg color ***/
body.blog.et_transparent_nav #main-header:not(.et-fixed-header) {
    background-color: #ffcc00 !important; /* set color here */
}
/*** END Blog page header bg color ***/

Single Post

Your Subtitle Goes Here
/*** Single Post header bg color ***/
body.single.single-post.et_transparent_nav #main-header:not(.et-fixed-header) {
    background-color: #ffcc00 !important; /* set color here */
}
/*** END Single Post header bg color ***/

Project Page

Your Subtitle Goes Here
/*** Project page header bg color ***/
body.single.single-project.et_transparent_nav #main-header:not(.et-fixed-header) {
    background-color: #ffcc00 !important; /* set color here */
}
/*** END Project page header bg color ***/

Archive Page

Your Subtitle Goes Here
/*** Archive page header bg color ***/
body.archive.et_transparent_nav #main-header:not(.et-fixed-header) {
    background-color: #ffcc00 !important; /* set color here */
}
/*** END Archive page header bg color ***/

Search Results Page

Your Subtitle Goes Here
/*** Search Results page header bg color ***/
body.search.et_transparent_nav #main-header:not(.et-fixed-header) {
    background-color: #ffcc00 !important; /* set color here */
}
/*** END Search Results page header bg color ***/

404 Page

Your Subtitle Goes Here
/*** 404 page header bg color ***/
body.error404.et_transparent_nav #main-header:not(.et-fixed-header) {
    background-color: #ffcc00 !important; /* set color here */
}
/*** END 404 page header bg color ***/

Hope you’ll find these snippets useful. Feel free to share your thoughts and suggestions below and don’t forget to share this post with your friends! ;) Cheers!

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!