We show you a number of ways in which you can use a little bit of code to totally transform your Divi header, such as adding attractive transitions to the standard horizontal menu, changing up the slide-in menu to add an eye-catching grid and more!

Transforming the Divi Header Tutorial One

#top-menu a:before {
content: "";
position: absolute;
top: -148px;
left: -10px;
width: calc(100% + 20px);
background: red;
z-index: -1;
border-radius: 4px;
height: 120px;
transform: skewY(0deg);
transition: .4s ease-in-out all;
}

#top-menu a:hover:before {
top: -60px;
transform: skewY(20deg);
}

#top-menu a:hover {
color: #fff;
opacity: 1;
}

#top-menu li:nth-child(1) a:before {
background: #ac3b4a;
}

#top-menu li:nth-child(2) a:before {
background: #fc6a3c;
}

#top-menu li:nth-child(3) a:before {
background: #f1be52;
}

#top-menu li:nth-child(4) a:before {
background: #71b953;
}

#top-menu li:nth-child(5) a:before {
background: #017a8d;
top: -70px;
transform: skewY(20deg);
}

#top-menu li:nth-child(5) a {
color: #fff;
}

Transforming the Divi Header Tutorial Two

.et_slide_in_menu_container ul#mobile_menu_slide {
background: #fff;
display: grid!important;
height: 100%;
grid-template-areas:
"left right"
"bottomleft bottomright"
"bottom bottom";
grid-gap: 5px;
padding: 5px;
}

.et_slide_in_menu_container ul#mobile_menu_slide li:nth-child(1) {
background: #ac3b4a;
}

.et_slide_in_menu_container ul#mobile_menu_slide li:nth-child(2) {
background: #fc6a3c;
}

.et_slide_in_menu_container ul#mobile_menu_slide li:nth-child(3) {
background: #f1be52;
}

.et_slide_in_menu_container ul#mobile_menu_slide li:nth-child(4) {
background: #71b953;
}

.et_slide_in_menu_container ul#mobile_menu_slide li:nth-child(5) {
background: #2F7DE2;
background-size: cover;
grid-area: bottom;
}

.et_slide_in_menu_container ul#mobile_menu_slide li:nth-child(5) a {
background: #017a8d;
}

.et_slide_in_menu_container ul#mobile_menu_slide li a {
display: flex;
height: 100%;
justify-content: center;
flex-direction: column;
text-align: center;
}

Transforming the Divi Header Tutorial Three

jQuery(document).ready(function($){
$('.et_pb_section:odd').waypoint(function() {
$('#main-header.et-fixed-header').addClass('dark');
});
$('.et_pb_section:even').waypoint(function() {
$('#main-header.et-fixed-header').removeClass('dark');
});
});

CSS

#main-header.et-fixed-header .mobile_menu_bar:before {
background: #fff;
color: #000
;
}

#main-header.et-fixed-header.dark .mobile_menu_bar:before {
background: #000;
color: #fff;
}

If you loved the content of the webinar and loved learning from SJ, then have a look at our online course!

Divi Space has recently launched the Transforming Divi with CSS & jQuery Course, and we’d love for you to join us! Here is a sneak peek of whats included in the course: