How to Create a Transparent Divi Primary & Secondary Menu

by | Jun 3, 2019 | Divi Tutorial | 8 comments

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!

Here’s the CSS I showed in the video:

.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!

 

Like this tutorial? You’ll love my CSS Course.

Use coupon code “CSS30” for $30 OFF at checkout!