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
- From the customizer click on Menus :
- Open the Menu Locations panel :
- 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
- Your site preview will refresh and you'll see your selected menu shown in the location you chose
- 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.
- In the Customizer, open the Menus panel
- Create, or expand an already created menu
- Click on one of the checkboxes against the available locations under Display Location :
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:
- From the Customizer navigate through Header Design -> Header Menus : mobile settings, scroll behavior
- Expand the dropdown list against the option Select the menu(s) to use for mobile devices :
- Select the header menu location(s) you want to be displayed as mobile menu(s) :
- Header Menu: the menu assigned to the Header location will be displayed as mobile menu in one bar on top
- Topbar Menu: the menu assigned to the Topbar location will be displayed as mobile menu in one bar on top (default)
- 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
- 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.