Add buttons to your navigation menu

You can add a button to your navigation menu, such as the one shown in this screenshot.

To add a button, first, create a menu item that you want to turn into a button. Then add a class to that menu item. Finally, add some CSS code for that class. Here we show you how.

Note: For this procedure, you need to have CSS Classes enabled in WordPress screen options. For details on how to enable, see the Related Article below.

Add the menu item you want to become a button:

  1. From the WordPress admin panel, go to Appearance > Menus or Customize > Menus.
  2. If you have more than one menu, select the one you want to edit from the list.
  3. Add the menu item that will become a button.
  4. Click Save Menu or just continue to the next task.

Add a custom class to the menu item:

  1. Click the arrow on the menu item so it expands to show extra settings.
  2. In the CSS Classes field, enter a class for the menu item.
    It's a best practice to prefix the class with a letter string unique to you to avoid conflict with other built-in classes. In this example, we'll use ss-nav-button for the class name.
  3. Click Save Menu.

Add CSS rules for the class:

  • Add the following CSS rules. Be sure to change the class in these lines to the custom class you used. Change the other settings for the button layout and style as you like.
    See the article on where to add CSS code.
/* Give the link some padding and some color */
.fl-page-nav .navbar-nav > li.ss-nav-button {
    padding: 10px;
}
.fl-page-nav .navbar-nav > li.ss-nav-button > a {
    background-color: #0F637D;
    color: #fff;
    padding: 5px 18px !important;
    border-radius: 5px;
}

/* Adjust the position for the fixed navigation menu */
.fl-page-header-fixed .fl-page-nav .navbar-nav > li.ss-nav-button > a {
    position: relative;
    bottom: 6px;
}

/* Give the button a hover & active state */
.fl-page-nav .navbar-nav > li.ss-nav-button > a:active,
.fl-page-nav .navbar-nav > li.ss-nav-button > a:hover {
    color: #fff;
    background-color:#196F8C;
}