Designing A Menu Button In WordPress

A very effective way to have one menu item stand out is by transforming it into a button. Typically only the main call to action is a button to help the visitor focus.

WordPress makes it easy to accomplish a menu button. Start by  navigating the Menu section on the backend, clicking on "Screen Options" in the upper right, and selecting "CSS Classes." Open the menu item you want to convert to a button and add the class menu-button.

WordPress Menu Class

Add the CSS styles to your styles.css file (under Appearance/Custom CSS for SproutWorx sites).

/*Add the "menu-button" class to one menu item for this to work*/
.menu-button {
border: 2px solid #007F00 !important;
background: transparent;
border-radius: 6px !important;
-moz-border-radius: 6px !important;
-webkit-border-radius: 6px !important;
}

/*.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li > a.menu-button */
.menu-button a {
color: #007F00 !important;
}

.menu-button a:hover {
background-color: #007F00 !important;
}

/*.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li > a.menu-button :hover {*/
.menu-button a:hover {
color: #fff !important;
}

And here's what the final menu would look like (i.e. same as the menu for SproutWorxs itself!).

menu button visual
Tyler

About Tyler

Tyler is a website designer for CYBERsprout and SproutWorx. In his spare time he enjoying paddleboarding, cycling, and reading Game of Thrones (aka waiting for Winds of Winter).

Leave a Comment