How to create buttons from your menu items

If you are using Hestia then please see here:  Hestia Documentation

After this tutorial, we are going to accomplish something like this:

Adding a "button" to your menu is pretty simple. The first step is going to WordPress Dashboard->Appearance->Menus. Ensure the CSS Classes option is enabled by clicking "Screen options" to the top of the screen and then checking the CSS Classes option.

A new option should now show up in your menus:

In the CSS Classes area enter a class of your choice and then click "Save Menu" to update your menu, the example above has the word zerif in it, this is optional and this tutorial will work for any of our themes. You could add this same class to multiple menu items or create other custom classes for other menu items to create different color buttons.

Now head over to Appearance->Customize->Additional CSS and paste the following CSS:

.zerif-cus-btn {
    background: #0000ff;
    padding: 0 10px 0 10px;
    border-radius: 5px;
}

This will turn the menu item into a button like the image above. You could change the color by generating the HEX code for a color of your choice here:  http://www.hexcolortool.com/ and replacing the one in the code with it, be sure to save your changes in the customizer after pasting the code.

TIP: To make the buttons "flat" remove the border-radius line of code. You could make some pretty cool looking buttons by using the different border-radius properties such as: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Example:

.zerif-cus-btn {    
	background: #34d293;
    	padding: 0 10px 0 10px;
   	border-bottom-left-radius: 5px;
    	border-top-right-radius: 5px;
}

Will result in:


Of course, you can change the pixel value to a higher number if you wish to make a more significant curve.

As mentioned previously you could add multiple different classes and change their colors by editing the code above with the name of your CSS Class (keep the ".") and changing the HEX color code:

That's it! You're done :)

Resources:

How To Add Menu Icons To WordPress In Under 3 Minutes (Video Tutorial)

More WordPress Video Tutorials

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.