In Semplice 7 the new navigation editor allows creating whatever you have in mind with no need to use custom code, you can learn about the new editor from our video guide here.
We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.
You can create a custom styled menu item with its own individual background color, padding, and underline using a custom class and CSS. Here's how.
Assign a class name
Open your nav by going to "Customize > Navigations". Select the menu item you want to style differently and in edit mode, assign it a class name. For example, you could call it "cta-button"
Add CSS
In the global CSS editor, use custom CSS to style your item. Be sure to target the EXACT custom class name you assigned to your menu item.
Example 1 - Change background color and text color
#content-holder .cta-button a {
color: #000 !important;
padding: 10px !important;
background-color: yellow !important;
}
#content-holder .cta-button a:hover {
color: #000 !important;
background-color: #FFF !important;
}Example 2 - Change paddings and margins
#content-holder .cta-button a {
padding: 10px 20px !important;
margin-right: 15px !important;
}Example 3 - Add underline
To add underline to your navigation items, you can use standard Semplice "Underline" features.
For example, you can choose "Underline Color" and set the "Underline" to 1. This way you will add a permanent underline effect to all items:
To add an underline effect that will only be visible on hover, you should set the "Underline Color" to "transparent" and add the "Border Color" under "Mouseover Options":
If you would like to have more control over the underline effect, you can use CSS:
#content-holder .cta-button {
border-bottom: solid 1px yellow !important;
}Example 4 - Shadow Effect
To create a shadow for navigation bar simply add the following code to "Customize" > "Advanced" > "Custom CSS":
.semplice-navbar {
box-shadow: 0px 5px 10px rgba(0, 0, 0, .2) !important;
}