Docs

How to Add a Button in the Header Menu

  • Updated:

The Total theme has 2 primary methods for adding a button to your site header which are explained below.

Method 1: Inserting a Button Directly into the Menu

To insert a button directly into the menu all you need to do is add a new menu item and then give it the classname “menu-button” (you can also add the classname “menu-button-rounded” if you want a pill-shape button but your default buttons aren’t pill shaped).

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:

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

Menu Button Styling

The menu button will take on the default theme accent/button colors which can be adjusted under Appearance > Customize > Global Styles but if you want to customize the button colors it’s very easy using a little custom CSS. Example:

.menu-button {
    --wpex-btn-bg: red;
    --wpex-btn-color: white;
}

Method 2: Inserting a Button using Flex Header Styles

If you are using one of the new Flex Header styles you can easily add a header button like the Biz demo via the “Side Content” content box in the customizer at Appearance > Customize > Header > General. Please see the example below:

Make sure you are using one of the new Flex Header Styles
Insert a button to the Side Content setting
Mobile Note: When using the Side Content box the contents will display on small screens as well (unlike using the menu button option). If you wish to hide the button on mobile you can do so by using the “Visibility” setting above the Side Content field.
Back To Top