I mentioned discovering the ‘active menu’ option in Divi in another post which listed some CSS used to achieve the effect, but I wanted to more fully expand the article so I made this video:
And here is the code used and, as always, be sure to use a Child Theme!
#top-menu a {
font-size:18px;
}
#top-menu li {
padding-right:0 !important;
}
#top-menu li a:after {
font-family: FontAwesome;
content : "f111";
font-size: 9px;
margin: auto !important;
display: block !important;
text-align: center !important;
}
#top-menu li:hover a:after {
font-family: FontAwesome;
content:"f096" !important;
color:green;
}
#top-menu li.current-menu-item > a:after {
content:"f096" !important;
}
/*
#main-header #et-top-navigation #top-menu-nav #top-menu li a:active {
color:red !important;
content:"f096" !important;
}
*/
ul#mobile_menu.et_mobile_menu a, ul#top-menu a {
position: relative;
display: inline-block;
margin: 10px 10px 0;
outline: none;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700 !important;
font-size: 1.15em;
}
Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.
Trackbacks/Pingbacks