How to Add a Button in the Header Menu

Total makes it easy to transform any menu link in the main header menu into a “button”. All you need to do is add the classname “menu-button” to your menu item and it will create a button which will take on the theme’s accent color. To change the color of the button, size, padding…etc, that would need to be done via custom css as I didn’t want to bloat the theme with even more options for something so simple.

Note: The menu button is setup to be used with Header Style One (left logo / right menu) as it wouldn’t look good on the other header styles.

Menu Button Classes

  • menu-button – Adds a simple slightly rounded button with the theme accent color as the background
  • menu-button menu-button-rounded –  Adds the menu button but also gives it greater rounded corners for a “pill-shape” button

menu-button-class

Don’t See the CSS Classes option? If you don’t see the field to enter your custom CSS class simply click on “Screen Options” on the top right of your menu dashboard to enable it. You can also view this video guide.

Result

Once you’ve added the classnames to your menu item it should display as a button on the front end like such: