Bring A Little Flair To Your Divi Navigation Menu

Bring The Flair

Divi brings an incredible amount of customization and one of the absolute best visual builders in the entire wordpress community. There are two areas where Divi falls behind the competition.  The first is menu customization and the second is footer custuomization.  Today we will show you how to bring a little flair to your divi navigation menu by utilizing a little custom CSS.

What It Looks Like

You can copy the below code into Divi Theme Option or we can make it really easy for you with the .json import fileIf you aren’t sure on how to imoprt files into Divi, check out our video on Mastering The Divi Import/Export Functionality, put in your email below and download the Theme Options File now.

 

The Code:

/* Main Navigation Modification */
#top-menu-nav a{
color:#434343; /* Change this color */
    -webkit-transition: height 200ms!important; /* Safari 3.1 to 6.0 */
    transition: height 200ms!important;
}
#top-menu-nav a:hover{
opacity:1!important;
color:#ff5959; /* Menu Line Mouse Over Color - Change This */
}
/* Submenu Modifications */
#top-menu li li a{
padding-bottom:5px;
}
#top-menu li li a:hover{
    color:#ff5959;
        background-color:rgba(0,0,0,0);
}
.nav li ul{
border:4px solid #ff5959; /* Border Color For Submenu */
z-index:9999;
margin-top:-10px;
margin-left:-40px;
box-shadow:3px 5px 10px rgba(0,0,0,.3);
}
@media only screen and ( min-width: 981px ) {
.nav-link a{
  color:#FFFFFF!important;
  background-color:#ff5959;
  border: 2px solid;
  border-color: #ff5959!important;
  margin: -10px 5px 10px 5px!important;
  padding: 10px 10px 10px 10px!important;
    -webkit-transition: all 200ms!important; /* Safari 3.1 to 6.0 */
    transition: all 200ms!important;
}
}
@media only screen and ( min-width: 981px ) {
.nav-link a:hover{
  opacity:1!important;
  color:#ff5959!important;
  background-color:#FFFFFF!important;
  border-color:#ffffff!important;
  box-shadow:3px 5px 10px rgba(0,0,0,.4);
}
}
/* Mobile Menu Modifications */
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
   display:inline;
   position: fixed !important;
   background-color: rgba(255,255,255,.95);
  box-shadow: 0px 10px 20px rgba(0,0,0,.2);
}
}
#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important;  transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible ; ul.sub-menu { display: block !important; visibility: visible !important; }
/* Main Menu Modifications */
.et_mobile_menu {
border:0px #fff;/*Change this*/
width:125%;
margin-left: -12.5%;
height:100vh;
}
#main-header {
    position: fixed!important;
    border-bottom:7px solid #ff5959;
}
@media (min-width: 980px) {
body{
    margin-top:45px;
}
}
/* Custom Header Classes ------------------------------------ */
@media ( max-width: 480px ) {
.header-adjust-col4{
margin-top:-35px!important;
}
}
#et_search_icon:hover{
   color:#ff5959!important;
}
/* Logo Animation on Hover */
#logo{
    -webkit-transition: 200ms; /* Safari */
    transition: 200ms;
}
#logo:hover{
transform:scale(1.1,1.1);
}
i

Tutorials

Learn how to become a DIY website master
i

Reviews

Our honest feedback of anything wordpress
i

Community

We showcase people doing amazing work