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.

Hueman header menus

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?

The Hueman theme supports three menu locations:

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

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

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 

Customizer from Dashboard

click on Menus for creation, deletion or managing menus.

  1. From the customizer click on Menus :Customizer Menus
  2. Open the Menu Locations panel :Customizer Menu Locations section
  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.

Use case: assign menu to Topbar

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 :Topbar menu locations

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).

Unset Topbar default page 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:

Sticky Menu

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) :

Hamburger header menu

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 :Mobile menus
  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 centeredMobile menus expanded
  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) :Mobile menu one bar
  • Logo centered, two menus :Mobile menu logo centered

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.