Site Header

The Fox comes with a very intuitive header builder right in Customizer.

Header have 3 section: Topbar, Main Header, Header Bottom. Drag and drop the elements into the sections to create your site header.

List of elements: Logo, Search, Menu, Social, Cart, Hamburger, Darkmode Toggle, HTML1, HTML2, HTML3.

Note: On mobile has only 1 section.

Header Layout

Each sections on Header you can choose layout for it.

Header Mobile

As noted above, Mobile Header has only 1 section, and it is separated from desktop header.

Elements on Header

List of elements supported by The Fox theme: Logo, Search, Menu, Social, Cart, Hamburger, Darkmode Toggle, HTML1, HTML2, HTML3.

Basically, to edit any element, just click on it and a settings panel will show on the left.

Header Menu

Before that, you need to create a new menu, and check “Primary Menu” checkbox in the bottom.

Header menu icon

Enter icon name from FontAwesome, you can get here: https://fontawesome.com/v4/icons/

Hamburger

On Front-end, when you click on Hamburger button then will show the off-canvas menu.

Configuring it is a bit complicated. Like Header Menu, consists of 2 parts:

  • Style for Hamburger button.
  • Settings content of Off-Canvas.

Style for Hamburger button

Settings content of Off-Canvas

Click Customize > Header > Offcanvas to edit/custom Off-Canvas.

HTML1, HTML2, HTML3

Add your custom content into the HTML elements. Have 3 elements: Html1, Html2, Html3.

Tips: read more button shortcode here.

Mega Menu

To make a menu item to become mega menu, just check to “Enable Mega Menu?” when you edit the menu item. Here’s something you should mind:

  • Mega menu item must be a first-level menu item, ie. it’s not a child of any other item.
  • It requires 3 levels depth.
  • Number of its DIRECT children will be number of columns. Please set 2 – 4 DIRECT children for 2 – 4 columns only.

Category Mega Menu

You can also convert a category item into a category mega menu

Sticky Header

A sticky menu is a fixed navigation menu on a webpage that remains visible as the user scrolls down.

Click Customize > Header > Sticky Header to edit it.

For mobile, click Customize > Header > Header Mobile, then click to “Sticky Header Mobile?

Hero Post Header

Being used for HERO Posts, for instance, Hero Full or Hero Half. Hero Header contains only logo + hamburger button.

First, you must select the layout for the post as either Hero Full or Hero Half.

Next, click Customize > Header > Header Hero Post to edit.