How to make a GeneratePress menu item into a styled button

 

In this video, I will show you how to add a button to your main or secondary navigation

-First, log into your WordPress admin area

To carry on we need to do two things;

-First, let’s go to appearances and click on the menus option
-Find the menu item you wish to appear as a button and click on the drop-down arrow. If you are missing the additional options click on the “screen options” at the top right and tick the CSS classes option.

Great, now all we need to do is add the following to the menu items CSS class “nav-button” and of course hit the save button!

-Next open a new tab and go to http://css3buttongenerator.com/ to create your custom style for the button. Leave this page open and go back to the WordPress admin tab.
-Lets click on the customize option in the appearances menu.
-Click on the additional CSS option and copy the following code:

@media (min-width:769px) {.main-navigation .main-nav ul li.nav-button a {

Your custom CSS here

margin: 10px 5px 10px 5px;
}
}

##CSS code form secondary navigation:

@media (min-width:769px) { .secondary-navigation .main-nav ul li.nav-button a {

Your custom CSS here

margin: 10px 5px 10px 5px; }
}

Now, add the styling part from the generator to the code and that’s it ?

 

Resources used: