Adding Buttons in Navigation

The Adding Buttons article shows you how to add buttons in content using some simple HTML and CSS.

Adding a call to action button in the navigation is also achievable with some CSS.

1. Add a custom class to your menu item, for example nav-button

2. Add the CSS:

For primary navigation:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #ffffff;
        border: 2px solid #000000;
        color: #000000;
        line-height: 35px; /*this number will likely need to be adjusted*/
    }
}

For secondary navigation:

@media (min-width:769px) {
    .secondary-navigation .main-nav ul li.nav-button a {
        background-color: #ffffff;
        border: 2px solid #000000;
        color: #000000;
        line-height: 35px; /*this number will likely need to be adjusted*/
    }
}