Convert Menu Options to Buttons in Divi
I was in process of creating a site where the client’s requirement was to create a menu with distinct red color. As I was searching for inspiration, I came across an article by Geno Quiroz – Transform a Divi Menu Item Into a CTA Button. It was good start.
Resource:
You need Divi and a little bit CSS.
Procedure:
Create the menu with optional submenus and view the page. Find the menu ids using inspect option in browser (Image 1). Menu IDs are defined as menu-id-xxx where xxx denotes an integer.
Add the following CSS in Divi Theme Options -> Custom CSS.
/* Begin Menu Modification */
#menu-item-54, #menu-item-81, #menu-item-253, #menu-item-150, #menu-item-151, #menu-item-152 {
padding: 15px 0;
}
#menu-item-54 a, #menu-item-81 a, #menu-item-253 a, #menu-item-150 a, #menu-item-151 a, #menu-item-152 a {
border-color: gray;
border: 1px solid gray;
color: #ec1b24;
padding: 10px 25px !important;
display: inline-block;
opacity: 1;
border-radius: 3px;
}
#menu-item-54 a:hover, #menu-item-81 a:hover, #menu-item-253 a:hover, #menu-item-150 a:hover, #menu-item-151 a:hover, #menu-item-152 a:hover {
opacity: .9;
background: #d32e2c;
color: #ffffff;
}
#top-menu li {
padding-right: 0;
}
#top-menu li.current-menu-item > a {
color: #ffffff;
background-color: #ec1b24;
}
.et_fixed_nav #et-top-navigation {
padding-top: 10px;
padding-bottom: 10px;
}
@media(max-width: 986px){
.et_fixed_nav #logo {
margin-left: 0px !important;
}
#menu-item-54, #menu-item-81, #menu-item-253, #menu-item-150, #menu-item-151, #menu-item-152 {
padding: 0px;
}
}
/* End Menu Modification */
