Navigation Button

Add a button in your primary navigation.

Navigation button example

To add a button to your primary navigation in GenerateBlocks, you need to apply a class to the menu item. When editing your menu, if you don’t see the option to give the item a class, click “Screen Options” at the top of your window and check the box for “CSS Classes”.

In the code used below, I used the class nav-cta. You’ll either need to use the same class, or change the code to match the class you use.

@media (min-width: 1140px) {
.main-navigation .main-nav ul li.nav-cta a {
  background: black;
  color: white;
  padding: .3em .7em;
  margin-left: 16px;
  border-radius: 4px;

It’s important to wrap this code inside of a media query (as is done in the example code above) so the button does not show up in the mobile menu (unless, of course, you want that). You can adjust the media query for the min-width size for your desktop menu.

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

2 thoughts on “Navigation Button”

  1. Hi, I have a question. If I apply a css hover effect to the menu, then the effect will also be reflected on the button in the menu and that may not be desirable. How to prevent an effect from being applied to a button?


Leave a Comment