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 six categories:

  1. Site Identity : Logo, Title, Tagline and Site Icon
  2. General design settings
  3. Design settings for desktops and laptops
  4. Desgin settings for smartphones and tablets in portrait orientation
  5. Contact Information
  6. Navigation Menus

Design settings for desktops and laptops

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.

  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.

BEHAVIOUR ON SCROLL

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.

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.

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

Doc created by: Menaka S.

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

Related Articles