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-
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!
Super helpful info. I used the CSS for transparency on the home page, and it worked like a charm.
I’m glad it helped you, Cherie :)
So, what if I don’t want to change the header background color for mobile/tablet? What other CSS would be applied? I’ve tried to figure it out myself by setting @media screen and (mix-width: 981 px), but I’m not getting anywhwere. Any advice you can offer would be greatly appreciated. I am just beginning to use CSS and am still learning.
You are on the right way, just place your CSS inside this @media query:
@media all and (min-width: 981px){
...your CSS here...
}
Hi Ivan: Can’t thank you enough for this post. I am using transparent header on this site, and it looks great excelt has an event calendar (EventOn), and so my header on the Event pages needs to have bg color changed just like you would for Single Posts or Portfolio, etc., but I can’t figure out what the class would be. Do you think you could help?
Hi Eleina,
you can target the single post and project pages using a specific CSS class which is added to the
bodytag but I am not sure if the EventOn plugin also adds any specific CSS classes to thebodytag which you could use(your site is in maintenance mode currently and I can’t check it myself). If not, then you will probably need to target each event page by its unique class individually. Use your browser developer tools to find out thebodytag CSS classes.Hope this helps.
Nice! What I want to do is similar, i want just the home page header trasparent everything else white
Hey Amaju,
try this CSS:
/* make header transparent on home page only */
.home #page-container {
padding-top: 0px !important;
}
.home #main-header,
.home #main-header.et-fixed-header {
background-color: rgba(0,0,0,0) !important;
}
/* end */
it will make both Primary and Fixed headers transparent on home page only. Note that the
padding-topof the page container needs to be set to zero so that the page content moves up behind the transparent Primary header.hello how can i make it transparent only the primary menu but the fix menu stay black. Thank you
Exclude the fixed navigation by changing the CSS selector, here is the updated snippet:
/* make Primary header transparent on home page only */
.home #page-container {
padding-top: 0px !important;
}
.home #main-header:not(.et-fixed-header) {
background-color: rgba(0,0,0,0) !important;
}
/* end */
Thank you Ivan – GREAT – GREAT – GREAT TIP!!!!!!! That saved me quite a bit of time
I am glad to be helpful, Daniel :)
Very helpful! Thank you for sharing.
Thank you Frederic, great to hear that.
Hi Ivan,
Divi beginner here :)..
How can I make the main menu transparant of a specific page?
Thanks in advance.
Cheers,
Peter
Hi Peter.
Each page has a CSS class containing the ID of the page, i.e.
page-id-6669, it is added to thebodytag and you can find it using the browser Dev Tools. Use this class to target the menu on that specific page, i.e. :.page-id-6669 #main-header {
background: transparent;
}
You might also need to set the
#page-containertop padding to zero so that the page content goes “behind” your transparent menu, like this:.page-id-6669 #page-container {padding-top: 0px; /* this might not be zero if you use a secondary menu, so, adjust to your needs */
}
Hope this helps.
Wow, thanks, I was assuming that was a lot harder ;-) Thank you agin for this post and for the quick response.
No problem, always glad to help :)
Thanks this is very helpful Curious what the selector is if I want to set the nav in Customizer
to #fff, but I want the hone page only to be translucent, like
rgba(255,255,255,0.74)
Is there a selector for the nav for just the home page? Thanks for this post.
Hi Gil, thanks for your comment.
Yes, you can apply a different color to header on home page only, try this CSS:
.home #main-header {
background-color: rgba(255,255,255,0.74) !important; /* define color here */
}
how to change the text color?
Try this:
body.single.single-post.et_transparent_nav #main-header:not(.et-fixed-header) #top-menu a ,body.single.single-post.et_transparent_nav #main-header:not(.et-fixed-header) #et_mobile_nav_menu a {
color: red ; /* define color here */
}
It should work for both desktop and mobile headers.