Managing the header menus in the Customizr 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. Customizr theme has lots of features that can be utilized to make an attractive, useful and compact header.

Let's start by the general design and layout options, the second part of this documentation will focus on how to display up to two menus in your header.

Access the Header Options

From the Customizer, click on Header to access the header options. The options are broadly divided into two categories:

  1. Design and Layout
  2. Navigation Menus

Design and Layout

The design and layout options of the header in terms of positioning of the individual elements inside the header can be decided with these options. There are two sections here.

 Header design and layout

  1. Firstly, you can choose a layout for the header by choosing one of the following three self-explanatory options from the  dropdown list:
    • Logo / title on the left
    • Logo / title centered
    • Logo / title on the right
  2. Note that this option not only decides the logo/title position, but also the main menu position.
  3. You can display a top border in the skin colour which you have chosen (If you have not chosen yet, you can choose from Global settings > Skin in the customizer) by checking against Display top border.
  4. Choose whether or not you want the tagline in the header by checking or unchecking against Display the tagline.
  5. If you want your social media links to be displayed within the header, check against Social links in header.
  6. By checking against Display menu in a box, the header elements are wrapped around in a box.

 Sticky header settings

What is a sticky header? A sticky header sticks on top of the screen even as you scroll down the screen. This means that wherever in the page you are, you can see the elements of the header on top of the screen.

  1. Check against Sticky on scroll  to enable the sticky header for your site. On doing this, you will find a host of other options appearing below.
  2. Do you want the tagline in the sticky header? Check against Sticky header : display the tagline.
  3. Do you want the title or logo? Check against Sticky header : display the title / logo.
  4. How about not displaying the title / logo in their original size and reducing their size in the sticky header? Check against Sticky header : shrink title / logo to achieve this effect.
  5. Do you want the main menu and secondary menu as well included in the sticky header? Check against Sticky header : display the menu.
  6. Lastly, checking against Sticky header : semi-transparent on scroll will make the content that is below the sticky header to be partially visible.
  7. Whether the header is sticky or not, you can set the z-index of the header by changing the default number of 100 against

Navigation Menus

Under Navigation Menus, you can decide the positioning options and other effects of menus on the header.

Creation of Menus

The theme supports two menus. So, firstly you have to create one or two menus, as per your needs. For creating menus, go to Appearance > Menus from the Admin Dashboard. For details on creation of menus, check the WordPress Codex Documentation On Menus.

Alternately, from the customizer, click on Menus for creation, deletion or managing menus.

Assign Menus to Locations

In this section, you can assigned menus to locations on the front page.

  1. From the dropdown list against Main Menu, choose the menu (from the ones you created earlier) that you want to be the main menu. By default, the main menu appears as a three-line navicon. This expands to produce vertical side navigation and can be collapsed back.
  2. You can choose to display an additional menu as a secondary menu. If you wish to do that, check against Display a secondary (horizontal) menu in the header. 
  3. On choosing the above option, another dropdown list appears for you to choose the secondary menu. Choose from it.

Main Menu Design

Under this section, you can change some of the finer aspects of the Main menu.

First and foremost, you can choose whether the main menu should be displayed as a three-line navicon or as a regular horizontal menu. Choose between Regular (horizontal) or Side Menu (vertical).

Main Menu - Horizontal

  1. If you choose a horizontal main menu, the next option is for mobile devices where the viewport is small. In such cases, to avoid the dropdown menu falling out fo the viewport, you can check against this option to limit the height of the dropdown menu.
  2. Choose between Menu on the left and Menu on the right for Menu Position.
  3. Under Secondary menu design , choose the position of the secondary menu - Menu on the left or Menu on the right.
  4. When there are submenus under some menu items, you can choose to expand them on hover or on click from the dropdown list against Select a submenu expansion option.
  5. Check against Reveal the sub-menu blocks with a fade effect  to give a fade effect when sub-menu items are revealed.
  6. You can also choose to give a Hover move effect for the sub menu items.

Main Menu - Vertical

  1. If you choose a vertical main menu, then it is shown as a three-line navicon. So, check against Display a label next to the menu button to display Menu next to the navicon.

  1. Now, choose between Menu on the left and Menu on the right for Menu Position.
  2. The next one is a Pro feature. The vertical side menu can be revealed with one of the following effects. Choose one of them and visit your site to see the effect. You can try the various effects in the live demo of Customizr Pro.
    • Reveal
    • Slide on Top
    • Push
    • Fall Down
    • Slide Along
    • Reverse Slide Out
    • Rotate In
    • Rotate Out
    • Scale Up
    • Delayed Rotate
  3. Under Secondary menu design , choose the position of the secondary menu - Menu on the left or Menu on the right.

  1. When there are submenus under some menu items ( only for Secondary Horizontal Menu ), you can choose to expand them on hover or on click from the dropdown list against Select a submenu expansion option.
  2. Check against Reveal the sub-menu blocks with a fade effect ( only for Secondary Horizontal Menu ) to give a fade effect when sub-menu items are revealed.
  3. You can also choose to give a Hover move effect for the sub menu items. ( only for Secondary Horizontal Menu )
  4. Lastly, you can choose from one of the following for the responsive behaviour of the secondary menu.
    • Move before inside the side menu
    • Move after inside the side menu
    • Display in the header
    • Hide

Remove all Menus

Under this section, check against  Don't display any menus in the header of your website, to remove all menus from being displayed. The menus are not deleted, but only hidden from view. But, use this if you have though of an alternative navigation mechanism for your readers.

With a combination of the above stunning options, you can create an attractive header for your site.