Make the Transparent Menu of Divi Colored on Certain Pages
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 ***/
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?
Here’s an Event Page: https://kitchensocial.com/events/its-sushi-night/
Hi Eleina,
you can target the single post and project pages using a specific CSS class which is added to the
body
tag but I am not sure if the EventOn plugin also adds any specific CSS classes to thebody
tag 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 thebody
tag 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-top
of 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 thebody
tag 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-container
top 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.