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.

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 for a page or any context?

Minimum WordPress requirements

Hueman Pro Theme or Hueman Addons v2.0+ plugin, and WordPress version 4.7+.

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 :

  1. On the front end of your website, navigate to your contact page
  2. Click on the customize button of your WP admin bar : 
  3. You are customizing only this page, the top right panel is active :Contact page scope
  4. Open the Menus panel and create a specific menu for this page
  5. Assign the created menu to the Topbar location :Company pages topbar assignment
  6. Detach the menu assigned to the Header location (in our case it's the menu called Header Menu):
    1. Click on the top panel left arrow :Menu left arrow
    2. Click on the menu assigned to the Header location (in our case it's the menu called Header Menu) :Header Menu assigned
    3. Uncheck the location Header under Display Location : Uncheck header menu location
  7. Save and Publish
  8. Close the customizer by clicking on the top left cross :Contact page close

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