How to add a button to your WordPress main menu

When creating a menu on your WordPress site pointing out the most important menu link results in creating a button like menu item. Most of the themes today don’t ship with this option built in. In this tutorial we’re going to learn how to easily add any style button to your menu using a simple CSS snippet.

Turning on your CSS Classes field

By default your CSS class field is not turned on in your menu items. We need to enable it first. Go to Appearance > Menus and locate the Screen Options at top right corner. Click on it to expand the Screen Options panel. After that make sure to enable CSS Classes field.

Screen Options

After this you should be able to see CSS Class field available upon expanding your menu item.

Css Class

Let’s add CSS Class called menu-button to your menu.

Adding CSS Code

After adding menu-button class to your menu go to Appearance > Customize > Additional CSS (or wherever your theme’s custom CSS field is located) and paste the code bellow.

Let’s go trough the code.

Background is obviously a background color of your color and it should be a HEX value. If you are unsure what HEX color is you can use online tools such as HTML Color Picker to pick a color for your button. Color is the color of your menu link. For dark background colors white text is usually used so we used white #000; color. We added some border radius to make button more rounded.

.menu-button a:hover is used to style your button on mouse hover. We used red color but you modify the code as needed.

In case that code above doesn’t work. It’s probably because theme styles are targeting your menu link styles more precise. In this case we use !important rule in our code like so color: #000 !important.

I hope you enjoyed this little tutorial. In case that you still have troubles styling your menu feel free to leave a comment bellow.

Leave a Reply

Your email address will not be published. Required fields are marked *