Navigation/Menu

Total includes 4 menu location options: Main: Used for the main navigation bar in the header. Footer: Used for the bottom right side of your site. Mobile Icons: Used for mobile menu only. No text. Just icons supported. Mobile Menu Alternative: If set, will display instead of the main menu on mobile devices. Create A Menu…

You can easily add icons to your menu items if you wish. Simply use the Total “ticon” shortcode inside the label with the name of your icon of choice. Example Code: Icons List: You can find a list of all available icons and the shortcodes to use here. Icons Without Text – Removing Extra Margin…

You can easily create some simple mega menus with 1,2,3,4,5 or 6 columns by simply adding a couple classes to your parent menu item. First, create your menu. Then add the classname “megamenu” in the CSS Classes box for the parent item you want to have a mega menu dropdown on. Also add the classname “col-3” where…

This theme will allow you to easily create a local scrolling menu by simply assigning a specific classname to your menu items to create a smooth animation as well as position your fixed header perfectly during the local scroll. Create Rows With Custom Local Scroll ID’s Using The Visual Composer On the page that you…

You can easily create non-clickable menu links to any WordPress menu by symple adding a # symbol for the “URL” when inserting a custom link. However, when a user clicks it a # symbol will be added to the URL. Total includes a unique class “nav-no-click” which you can add to any menu item so that…

Total by default includes 2 different mobile menu styles to choose from. Below are the instructions for selecting your mobile menu style and also screenshots for examples of what they each look like. Selecting Your Mobile Menu Style To select your mobile menu style simply log into your WordPress dashboard then go to Appearance >…

By default all sub-dropdown items on the main menu open to the right, however, if you have dropdowns on the far right this could cause them to go off the screen which isn’t good. For this reason Total has a few useful classes to make items open to the left instead of the right. left-dropdowns…

By default the dropdowns on the Total WordPress theme have a little pointer right above them. In version 1.6.4 and greater you will find options in the Customizer for altering the pointer background and color, but what if you want to remove them completely? Well, I didn’t add an extra option to remove it because…

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…

Total includes an advanced functionality to display custom menus on a per page basis. Simply create your custom menu and select it from the Page Settings for the page where you want it different. Advanced Visibility You can also use a theme filter to conditionally display different menus see the sample snippet here.

In order to add classnames to your WordPress menu item you must first enable the classes field in your menu dashboard which is located in the “Screen Options” tab in the top right corner. See the screenshot below for more details:

If you want your main menu dropdowns to be flush with the very bottom of your header simply go to Appearance > Customize > Header > Menu and enable the checkbox that reads “Full-Height Menu Items?“. This will make your menu items the same height as your header thus placing your dropdowns at the bottom…

The mobile icons menu works a bit differently then standard menus. To create your mobile menu you need to create a new menu then instead of adding the names of your pages such as Portfolio, Blog, Contact…etc, your Navigation Label will be the theme icon name you want to display for that menu item. Please…

When working with the WordPress menu system there are actually a lot of fields that are hidden by default and can be enabled via the “Screen Options” panel. One of these is the link target. Sometimes you may want to open a menu item in a new URL and to do that you will need…

In the Total theme you can create a custom menu and assign it to be used for mobile devices only. To do this simply go to Appearance > Menus and create a new menu and add the items you want. Then assign it to the  location.

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…

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…