Make the Transparent Menu of Divi Colored on Certain Pages

by | Jan 6, 2017 | 2 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 via Customizer this change applies everywhere. But this can be done easily by using 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.

#1 - Blog Page

 
body.blog.et_transparent_nav #main-header:not(.et-fixed-header) {
          background-color: #ffcc00 !important; /* define color here */
          }

#2 - Single Post Page

 
body.single.single-post.et_transparent_nav  #main-header:not(.et-fixed-header) {
          background-color: #ffcc00 !important; /* define color here */
          }

#3 - Single Project Page

body.single.single-project.et_transparent_nav  #main-header:not(.et-fixed-header) {
          background-color: #ffcc00 !important; /* define color here */
          }

#4 - Archive Page

 
body.archive.et_transparent_nav  #main-header:not(.et-fixed-header) {
          background-color: #ffcc00 !important; /* define color here */
          }

#5 - Search Results Page

 
body.search.et_transparent_nav  #main-header:not(.et-fixed-header) {
          background-color: #ffcc00 !important; /* define color here */
          }

#6 - 404 Page

 
body.error404.et_transparent_nav  #main-header:not(.et-fixed-header) {
          background-color: #ffcc00 !important; /* define color here */
          }

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!

Pin It on Pinterest

Shares