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.
