Customizing Phlox Header Section

header-sectionTo customize your website's header section, Phlox provides many options in the customizer. The Header Section includes six layouts, a search button on the header, changing the header width and height, and a border below the header. Also, the header can be sticky or not.

To find the related options follow below steps:

  1. Go to your WordPress Admin Panel
  2. Click Appearance on the Dashboard
  3. Then click Customize
  4. Navigate Header > Header Section

Video Tutorial


Header Layout

There are six available layouts to choose. All of these layouts display logo and menu, just the located places are different.
Layout Preview

Logo Left - Menu Right

logo-left-menu-right

Logo Left - Burger Right

header-layout2
logo-left-burger-right

Logo Right - Menu Left

header-layout3
logo-right-menu-left

Logo Right - Burger Left

header-layout4
logo-right-burger-left

Logo and Menu Middle

logo-mid-menu-mid

Logo and Menu Left

header-layout6
logo-left-menu-left

Vertical Menu

No Header

As you can see in some layouts menu replaced by a burger menu icon. You can find the information about customizing the burger menu in this article.


Search Button

By enabling search button, a search icon appears at the right side of the menu (This option is not functional for the last two header layouts).

[row][col_half] search-button[/col_half][col_half]search-button-previewsearch5search6[/col_half][/row]

The search button is also available at top header bar too. To know more about top header bar, read this page.

By clicking on the search button, a new search section will open. There are two available skins for this fullscreen search. To choose your desired skin:

  1. Go to your WordPress Admin Panel
  2. Click Appearance on the Dashboard
  3. Then click Customize
  4. Navigate Header > FullScreen Search

[row][col_half] full-screen-search[/col_half][col_half]light-skindark-skin[/col_half][/row]


Header Width, Header Height, and Border

  • The header width can be appeared boxed or full-width. In the boxed layout, the width is equal to the content of page content wrapper and the full-width header, the width is 100% of the browser width.

This change can only be seen in desktop view.

[row][col_half] width-height-border[/col_half][col_half]boxed-previewfull-width-preview[/col_half][/row]

  • You can also change the header height (in pixels).
  • There can be a border below the header. Enable it by switching on the Add border.

Header Animation Delay and Overlay Header

You can add delay before starting the header animation.

Also, if you want to overlap your header on the next section, you can Enable Overlay Header. The next section will appear under the header instead of appearing after the header.


Display Socials, Logo, and Cart

These items can be added to all of the available layouts:

You can enable Add Social Icons option to add your social networks icons in header menu. Their size can be Small, Normal, Large, or Extra Large.

Enable Display Logo to add your website logo in header section.

To add header cart in header section, enable Display Header Cart. You can change the icon for cart and the color of dropdown skin.

Cart Dropdown can be activated with Hover or Click.


Sticky Header

By enabling the sticky header option, the header is always accessible and will be fixed at the top of the page, as you scroll down the page.

stickyheader0

You are able to change the height, background color and color scheme of the sticky header. Also, there is an option to scale down the logo while scrolling down.


Background Color

Header or Vertical Menu Background Color

You can set a background color for your menu.

If you want to change more options of Vertical Menu, check out Header Menu.

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

Still need help? Contact Us Contact Us