Highlight Menu Item as a Button
Coding language CSS
What It Does Allows you to make specified menu items appear as buttons
How To Implement Under Appearance, go to Menu
Open the menu item
Click on Screen Options, Enable the CSS Classes Checkbox and give a class to the menu item that needs to be highlighted
Save
Add the CSS to your Customiser > Additional CSS
Rating
0.0
Rated 0 out of 5
The Code
.menu-item-highlight {
color: #5d9c04;
background: transparent;
border-color: #5d9c04;
border-style: solid;
border-width: 2px;
border-radius: 50px;
padding: 0px 10px;
transition: all 0.2s linear;
line-height:45px;
}
.menu-item-highlight a {
color:#5d9C04;
}
.menu-item-highlight:hover {
color: #ae0445 !important;
background: #ffffff;
border-color: #ae0445;
}
li.menu-item-highlight:hover {
color:#ae0445;
}
.menu-item-highlight:active {
border-radius: 22px;
}
Rate this code