Managing the header menus in the Hueman theme

The header is an important section of any site or blog because a good header can not only catch the attention of the casual visitor, but also prove to be useful in accessing various pages of the site. The  Hueman WordPress theme has lots of features that can be leveraged to make an attractive and useful header.

In this documentation page we'll see how to create and arrange header menus in the Hueman theme in a proficient way.

This documentation page will go through the following topics :

• What are the available predefined menu locations in the Hueman theme?
• How to assign a menu to a location?
• How to enable (disable) sticky menu?
• How to set a mobile menu?
• What are the different mobile menu style ?
• How to set a specific menu for a page or any context?

What are the available predefined menu locations in the Hueman theme?

The Hueman theme supports three menu locations:

• Topbar: located at the very top of your page :
• Header: located in the header just below your title or logo :
• Footer: located in the footer just above the credits :

N.B. Throughout this document we'll focus on the Topbar and Header menus, but the same principles can be applied to the Footer menu too

How to assign a menu to a location?

Creation of Menus

Firstly you have to create a menu. For details on creation of menus you can check the  WordPress Codex Documentation On Menus.

Alternatively, from the customizer 

click on Menus for creation, deletion or managing menus.

Assign Menus to Locations

1. From the customizer click on Menus :
2. Open the Menu Locations panel :
3. From the dropdown list against each menu location (Topbar, Header, Footer) choose the menu (among the ones you created earlier) that you want to be assigned to the specific location
4. Your site preview will refresh and you'll see your selected menu shown in the location you chose
5. Then click on the Save and Publish button to make your change persistent

Use case: Assign the menu "My topbar menu" to the Topbar location.

You can also assign a menu location directly when editing/creating a menu.

1. In the Customizer, open the Menus panel
2. Create, or expand an already created menu
3. Click on one of the checkboxes against the available locations under Display Location :

N.B. By default, when you have assigned no specific menu to the Topbar location, the WordPress default page menu will be displayed there. You can easily disable the default page menu for the Topbar location by unchecking the option Topbar menu : Use a default page menu if no menu has been assigned (then Save and Publish).

How to enable (disable) sticky menu?

From the Customizer navigate through Header Design -> Header Menus : mobile settings, scroll behavior

That's the place where you can choose the sticky menu behavior.

By default the menu will sticky to the top of your page both in desktop and mobile devices - both  Desktop devices : make the top menu stick to the top on scroll (red arrow) AND Mobile devices : make the mobile menu stick to the top on scroll (blue arrow) options checked:

Chose the combination that better suits your needs.

How to set a mobile menu?

When visiting your website using a smartphone or a tablet (with a width less than 720px), the menus are revealed when clicking on the hamburger button(s) :

To choose which header menu you want to be displayed as mobile menu follow these steps:

1. From the Customizer navigate through Header Design -> Header Menus : mobile settings, scroll behavior
2. Expand the dropdown list against the option Select the menu(s) to use for mobile devices :
3. Select the header menu location(s) you want to be displayed as mobile menu(s) :
   1. Header Menu: the menu assigned to the Header location will be displayed as mobile menu in one bar on top
   2. Topbar Menu: the menu assigned to the Topbar location will be displayed as mobile menu in one bar on top (default)
   3. Topbar and header menus, logo centered: both the menus assigned to, respectively, Topbar and Header menu locations will be displayed as two separated mobile menus with the title/logo centered
4. Save and Publish

What are the different mobile menu style?

The  Hueman theme allows you to chose among two different mobile menu styles:

• One bar on top (default) :
• Logo centered, two menus :

How to set a specific menu only for a page ?

You'll find a detailed use case describing how to achieve this on this page.