Custom styled menu item in navigation

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 it's own individual background color, padding, and underline using a custom class and CSS. Here's how.

Step 1: 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"

Step 2: 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 3 - 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;
}