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 utilized 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 for a page or any context?
Minimum WordPress requirements
With the Hueman Pro theme and its unique customization technology you'll be able to customize any page (context) of your websites independently from the others.
Let's see how to use this technology to set up a specific menu ONLY for a specific page.
Use case: setting a specific top menu to your Contact page and no header menu
In this example, you want to set a particular menu on the top of your contact page ( Topbar menu location), including links to some company's pages, for example. But you want this menu yo be only visible on the contact page, and not in all other pages. Plus you don't want to display any other menu.
Here's how to achieve this :
- On the front end of your website, navigate to your contact page
- Click on the customize button of your WP admin bar :
- You are customizing only this page, the top right panel is active :
- Open the Menus panel and create a specific menu for this page
- Assign the created menu to the Topbar location :
- Detach the menu assigned to the Header location (in our case it's the menu called Header Menu):
- Click on the top panel left arrow :
- Click on the menu assigned to the Header location (in our case it's the menu called Header Menu) :
- Uncheck the location Header under Display Location :
- Save and Publish
- Close the customizer by clicking on the top left cross :
Your page should display a specific menu, not visible on other pages, and no menu in the Header location. You can see the result live on the demo page here.
The same method can be applied to any other context (page, category, single post) or to group (All pages, All categories ...)