The Total theme has 2 primary methods for adding a button to your site header. This article will explain both methods.
This article is intended for the default theme site header. If you are using the header builder you will want to insert your button by editing your header template. This can be done by adding the button into it’s own column or using the Flex Container to add your button directly next to your Horizontal Menu element.
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.
Rounded Button? You can also add the classname menu-button-rounded if you want a pill-shape button. If you want to make all buttons on your site pill-shaped you should modify your buttons globally.
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 class to your menu item, it should display as a button on the front end like such:
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:
Once you select a Flex header style you can scroll down to view the Side Content field.
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.