How to Create a Transparent Divi Primary & Secondary Menu
In this tutorial, I’ll show you How to Create a Transparent Divi Primary & Secondary Menu. To take it a step further, I’ll show you how to do this for ONLY the homepage. I get this look requested often by clients. I’ll also show you how to make sure the transparency effects don’t affect the fixed menu bar if you have that setting in place. These are things that we can’t achieve with the standard Divi Theme Customizer Settings and would be really hard to do with 3rd party plugins.
Before we begin, as I mention in the video, you CAN make the menus transparent by dragging the opacity in the background colors down to zero on the Primary Menu Bar, Secondary Menu Bar and Fixed Navigation Settings under the Header & Navigation settings in the Theme Customizer.
Where you can change the transparency of the menu via Theme Customizer
However, when doing this, it creates the transparency effect on ALL other pages. This is ok if all your headers have a dark header image but what about 404 pages, standard blog posts and other pages that aren’t using the builder? Here’s how a standard page looks when applying those settings in the theme customizer.
Example of the issue when transparency is set in customizer
So it’s good to know how to do this on strictly the home page. View all the CSS code below but in short, the big trick here is that you can add a class of “.home” and anything after it will just be customized on the homepage. It’s a super handy trick and you can use that on ANY element. ID’s, classes, text, headings, sections, modules, rows, etc. For example:
.home h2 {color:red;}
This code will make all heading 2’s on the homepage red. Follow along with the video and you can use the code below for reference!
.home #main-header {
background-color: #14263000!important;
box-shadow: 0 0 0 rgba(0,0,0,.1);
}
.home #top-header {
background-color: #14263000!important;
background-image: none;
}
.home #page-container {
padding-top: 0px!important;
}
.home .et-fixed-header#main-header, .et-fixed-header#main-header .nav li ul, .et-fixed-header .et-search-form {
background-color: rgba(20,38,48,0.98)!important;
}
.home .et-fixed-header#top-header, .et-fixed-header#top-header #et-secondary-nav li ul {
background-color: #142630!important;
background-image: linear-gradient(150deg,rgba(255,255,255,0) 55%,#8dc63f 25%);
}
Be sure to place this in the Divi Custom CSS area or ideally Child Theme Stylesheet. See tutorial below for more info on that.
Hope this tutorial helps and again, just use the code above as reference for customizing your sites!
Links mentioned in the video:
Like this tutorial? You’ll love my CSS Course.
Use coupon code “CSS30” for $30 OFF at checkout!
Great Tutorial! Thank you, you are a wonderful teacher. How I wish I could afford your CSS course!!
This did the trick! Took some tweaking but finally I have what the client wanted. Now I need to go back and go through your CCS course again because I still get totally lost in finding the right css to change in Inspector.
Many thanks Josh!
Awesome Diana! Yep the course is ready for you to go back through anytime! Always good to fresh’n up with Inspect Element 🙂 It is an art in itself!
Hello, is this tutorial still working with the last version of Divi and WordPress?
I’m asking because when using only this piece of code I get the opposite effect. When the home page loads, the primary menu background is white and when i scroll it gets transparent.
.home #main-header {background-color: #c9c9c900;!important}
.home #page-container {padding-top: 0px;!important}
Thanks in advance.
Hey Mario,
Do you have any styling set in the Theme Customizer? If so that’ll override the CSS unless you intentionally override that with some CSS tricks. Guessing that’s the cause.
Hey Josh, I’ve been following you work for a few weeks and your tutorials are awesome, good on ya!
I’ve tried this CSS on a website am building and it just worked smooth, but have one question .. What if the “second/fixed menu” is white color, is it possible changed the font color on the scroll withs some CSS tweak?
Thank you!
Yeah I think you can do that in the Theme Customizer or you can change it with CSS via the #top-header ID in front of the font settings! Hope that helps.
This is exactly what I needed. Thank you so much!!