Main header

Knowledgebase > Theme Customizer

POFO provides so many options to customize your main header. Please navigate to WordPress Admin > Appearance > Customize > Header. You will find some panels under this as follows.

Logo and Favicon
Header Style and Data
Hamburger Menu
Header Color
Submenu Color
Mobile Menu Color

Let’s understand each panel one by one.

1. Logo and Favicon

Go to article “Setup your logo” and “Setup your site favicon icon” for more details.

2. Header Style and Data

You can alter header style and data using this option. You will get features like select menu, choose header style, choose sidebar, set position for logo and menu. Just you need to follow simple instructions. Here you will have settings as mentioned below.

Header
Container Style
Header Style
Menu
Sticky Type
Center Menu
Logo Position
Search
Sidebar
Select Sidebar
Slide Menu

Header

In this setting you can enable / disable the header by selecting “On / Off” button. After all changes click on the “Publish” button to save changes.

Container Style

Go to article “Mini Header > Container Style” for more information.

Header Style

You can select any of the 4 styles available for your site header from this setting. Go through the screen shots provided below to know each style.

Option – 1 (Standard)

Option – 2 (Hamburger)

Option – 3 (Left Classic)

Option – 4 (Left Modern)

Menu

You can select any menu from the list of menus created in WordPress Admin > Appearance > Menus to be displayed on the header of your site.

Sticky Type

This feature will give you functionality to make your header sticky on scroll down/up or non-sticky.

Option – 1 (Appear on Up Scroll), header will be visible when you move down and try to go up again.

Option – 2 (Appear on Down Scroll), header will visible when you move down.

Option – 3 (Non Sticky)

This option will show header at the top of the page only. When you go down on page then header will not display.

Center Menu

You can set position of menu to center by enabling this option.

Logo Position

You can set logo position to left, top or center by selecting any from the drop-down provided under “Logo Position”.

Search

You can show or hide search box on header using this option.

Sidebar

You can show or hide sidebar on header using this option.

Select Sidebar

You can select which sidebar you want to add to your header after enabling it in above setting and this is especially for social media icons as shown in our demo pages.

Slide Menu

You can show or hide slide menu in header using this option and assign a sidebar to show the content of that sidebar within that slide menu panel.

Copyright

You can enable / disable copyright text, enter your desired text and change text color here.

3. Hamburger Menu

If you have selected hamburger header style for your site header then only you will be able to see this option in customizer. It will give you following settings.

Menu Background Color
Menu Text
Menu Text Hover
Background Image
Logo
Retina Logo
Background Overlay Color
Background Overlay Opacity
Hamburger Menu Sidebar
Select Hamburger Menu Sidebar

Menu Background Color

Select any color from the color picker under menu background color to change hamburger menu background color and click on the “Publish” button to save the changes.

Menu Text

Select any color from the color picker under menu text to change hamburger menu text color and click on the “Publish” button to save the changes.

Menu Text Hover

Select any color from the color picker under menu text hover to change hamburger menu text color on mouse pointer hover and click on the “Publish” button to save the changes.

Background Image

You get an option to set background image on your hamburger menu. Click on the “Select Image” button and select any image from the media library then click “Select” button at the right-bottom corner of pop up gallery. Click on the “Publish” button to save the changes.

Logo

You get an option to set logo image on your hamburger menu. Click on the “Select Image” button and select any image from the image pop up gallery then click “Select” button at the right-bottom corner of pop up gallery. Click on the “Publish” button to save the changes.

Retina Logo

You get an option to set logo image on your hamburger menu for device having Retina display. Click on the “Select Image” button and select any image from the image pop up gallery then click “Select” button at the right-bottom corner of pop up gallery. Click on the “Publish” button to save the changes.

Background Overlay Color

This option will change the background overlay color when hamburger menu is open. Click on “Select Color” button under Background Overlay Color and select color from color picker.

Background Overlay Opacity

You can change opacity of the background color by selecting any option from drop down under Background Overlay Opacity. Click on the “Publish” button to save changes.

Hamburger Menu Sidebar

You can display / hide sidebar on hamburger menu by selecting “On/Off” under Hamburger Menu Sidebar.

Select Hamburger Menu Sidebar

You can select the sidebar to make it visible under menu items, like social icons as per our demo pages.

4. Header Color

You can set color for your site header’s background, menu text, sticky header background and sticky header menu text from here. You will find different setting for each of these. Just click on the “Select Color” button under any setting and select suitable color for that same. Settings are as listed below.

Background
Menu Text
Menu Text Hover
Sticky Header Background
Sticky Header Menu Text
Sticky Header Menu Text Hover

Background

Menu Text

Menu Text Hover

Sticky Header Background

Sticky Header Menu Text

Sticky Header Menu Text Hover

5. Submenu Color

You can set color for your submenu’s background, text and third level menu background from here. You will find different setting for each of these. Just click on the “Select Color” button under any setting and select suitable color for that same. Settings are as listed below. You must have selected header style from any of “Left Classic” or “Left Modern”.

Background
Submenu Text
Submenu Text Hover
Third Level Menu Background

Background

Submenu Text

Submenu Text Hover

Third Level Menu Background

6. Mobile Menu Color

You can set color for your menu and submenu’s background, text and submenu heading from here. You will find different setting for each of these. Just click on the “Select Color” button under any setting and select suitable color for that same. Settings are as listed below. You must have selected header style from any of “Left Classic” or “Left Modern”.