Customizr Theme Options : Header settings

Header overview

This section focuses on the Header, the area displayed on top of each pages of your Customizr website containing various elements:

  • Top Border
  • Logo or Site Title ( the logo or the site title are set from the Global Settings )
  • Navbar Box
  • Social icons  ( the social icons are set from the Global Settings )
  • Tagline  ( the tagline is set from the Global Settings )
  • Menu/Navbar

You can adjust the Design and layout of the Header, and the Navigation Remember to check the  Global Settings for other related settings.

Design and layout

  1. You can choose the position of the Logo/Title – Left, Center, Right – of the Navbar Box
  2. You can choose whether to display the top border (color is set by the Skin selection)
  3. You can choose whether to display the Tagline
  4. You can choose whether to display links to social media
  5. You can choose whether to display the Navbar Box (the shaded area around the Social Icons/Tagline/Menu)

Sticky Header Settings

  • The theme comes with a sticky menu on scroll, by default. There are several options to help you control the elements of the header that you want to display in sticky mode.
  • 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.
  • 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.
  • Do you want the tagline in the sticky header? Check against Sticky header : display the tagline.
  • Do you want the title or logo? Check against Sticky header : display the title / logo.
  • 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.
  • Do you want the main menu and secondary menu as well included in the sticky header? Check against Sticky header : display the menu.
  • Lastly, checking against Sticky header : semi-transparent on scroll will make the content that is below the sticky header to be partially visible.
  • Another interesting option is . There might be contexts where the sticky header will be positioned behind other elements. You can adjust this with the z-index option. Click on the link to find out more.

Customizr comes out of the box with one menu location in the website header.

  1. First create a menu in Dashboard>Appearance>Menus or In the customizer menu panel (click on Manage menus button to go there)
  2. Select a menu in the dropdown list of the customizer navigation section (see picture).

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.
  2. Now, choose between Menu on the left and Menu on the right for Menu Position.
  3. 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
  4. Under Secondary menu design , choose the position of the secondary menu - Menu on the left or Menu on the right.
  5. 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.
  6. 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.
  7. You can also choose to give a Hover move effect for the sub menu items. ( only for Secondary Horizontal Menu )
  8. 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.