Common CSS DIVI snippets

Written By Shane Taubman

September 30, 2018

This article is has some common CSS code I use on my WordPress websites.

Disable default Divi bottom footer

#footer-bottom{#footer-bottom{ display:none;}

Center Mobile Menu

.et_header_style_centered #main-header .mobile_menu_bar_toggle { 
left: 50%; left: calc(50% - 16px);}
.et_fixed_nav #main-header {position: fixed !important;}

Main Menu styling (Underline animation on hover)

#top-menu .current-menu-item a::before {
-webkit-transform: translateY(18px);
transform: translateY(18px);
opacity: 1.0;
}
#top-menu li a:hover:before {
-webkit-transform: translateY(18px);
transform: translateY(18px);
opacity: 1;
}
#top-menu li a:before {
content: '';
position: absolute;
top: 10px;
left: 0;
background: #fac500; /* Change your color here */
width: 100%;
height: 2px;
-webkit-transform: translateY(24px);
transform: translateY(24px);
opacity: 0;
transition: 0.3s ease;
}
ul#top-menu li.menu-item:not(:last-child) { 
    padding-right: 40px !important; 
}
#top-menu-nav #top-menu a:hover,
#mobile_menu_slide a:hover { 
    color: #fac500 !important; 
    opacity:1 !important;
}

Configure menu or text to hover (change color)

/** Footer Menu ***/
.footer-menu span a:hover{
	color:#fac500 !important;
}

Blurb Animation (Image zoom out on hover)

You may also like…

0 Comments