Header

The “Transparent Header” (also referred to as “Overlay Header”) in Total allows you to position whatever is at the top of your page under the main header (which will be transparent) so you can create some cool unique layouts. This function can be enabled Globally or on a per-post/page basis. Note: When you enable the…

Total includes the built-in ability to have fixed header or menu on-scroll and it can be adjusted and disabled via the Customizer. Simply go to Appearance > Customize > Header > Sticky Header (or Sticky Menu) to tweak your settings. Some header Styles support a full sticky header and so you will see a “Sticky…

If you want to alter the main header logo for specific pages, archives, posts or various sections of the site you can do so easily using the theme filter “wpex_header_logo_img_url”. See the example function below:

Total includes different Header styles that you can choose from with a single click. Simply go to Appearance > Customize > Header > General and select your style. Selecting a style will give you the base layout for your header which you can then customize to change the colors, spacing, menu, etc. Flex Header Styles…

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…

Important: Since version 3.0.0 this is NO longer required. You can display/hide the search icon in the menu as explained in the docs here: http://totalwptheme.com/docs/header-search/ By default the menu search icon is disabled on header style 2 because it’s added directly in the header as a form. However, you can easily enable it via a function in…

You can easily decrease the height of your header by altering the top and bottom padding of the header. Simply go to Appearance > Customize > Header > General to alter the default settings. See below: Important: You MUST enter “px” for the value to work correctly while working in the customizer. Header Style One Menu Height…

By default the Total theme will display your desktop menu from 960px and above and display the mobile menu from 950px and under. However, you can easily alter this (useful if you have a lot of menu items or want the mobile menu on all devices) via the Customizer under the Appearance > Customize >…

If you are using header styles two, three or four then you will notice an option in the Customizer called “Aside Content” which you can use to add additional content to the header. This field allows you to enter simple text, shortcodes, html or you can even enter the ID for any page to display…

By default the Total theme centers all your content based on your site widths settings or default values. If you want you can make your entire site 100% wide by tweaking these settings, however, you can also have centered content with a full-width header if wanted via the option available at Appearance > Customize > Header…

The Total WordPress theme also includes “Header Builder” functionality which allows you to create a custom template using the page builder of your choice (WPBakery, Elementor or Gutenberg) add any content you want then display this as a replacement of your main header. This unique feature will give you 100% control over the header and…

The Total theme includes the ability to display a search link in the header menu that will “toggle” (display) the search when clicked. However, sometimes you may want to disable the search link and use a different method for opening the search function. We’ll don’t worry it’s possible with Total via unique classnames. Each style…

By default the theme header in the Total theme is enabled (of course), however, in some cases you may want to completely disable the theme’s default Header globally. Especially if you are working with a single page website and you want to “design” the header area using the Visual Composer or using a slider via…

The Total theme doesn’t apply any max-width to your logo to give you the freedom to have any logo size you want on your site. This, however, can potentially cause issues on mobile where your logo might overlap with the mobile menu or extra content added to the right side of the logo if the…

In Total 5.3 we introduced new new Header Menu Dropdown Methods to select from in the Customizer under Appearance > Customize > Header > Menu Dropdowns. Previously the theme always used the SuperFish js script for the header menu dropdowns which requires loading two extra JS files on the site. By selecting one of the…

By default the Total theme’s mobile menu is composed of your primary menu and a search element (if enabled). However it’s very easy to insert extra content either at the top or the bottom of your mobile menu by using the theme’s Custom Actions panel (or hooks via your child theme). Adding Basic Text/HTML If…

In some cases you may want to add a link to your main header menu but only for display in mobile devices. For example, if your header has a button to the right but there may not be enough room on mobile to display that button or you may wish to slim things down on…