Header

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

There’re 3 separated header types:

  1. Desktop Header: is the normal header you see on desktop/laptop.
  2. Mobile Header: Mobile Header is separated from desktop header. When you click to “Mobile Header” sub-panel in Header Panel, you’ll see Mobile Header Builder.
  3. Hero Post Header: Being used for HERO Posts, for instance, Hero Full or Hero Half. Hero Header contains only logo + hamburger button.

Go To Customize > Header > Header Layout > Header Components to enable/disable header search button and select the search style.

There’re 2 search style: Classic and Modal. The modal search will open the search box to full screen.

In modal search box, there’s a suggestion menu. You can set up the suggestion menu in Dashboard > Apperance > Menus.

  1. Create a new menu, eg. My search suggestions.
  2. Add menu items into the menu. May be some popular categories, tags, articles, pages..
  3. Check to “Modal Search Suggestion” in the bottom and hit Save button.

Header Menu

Set up Header menu

Go to Dashboard > Appearance > Menus to create a new menu

Add menu items from the left menu to your menu. Check “Primary Menu” checkbox in the bottom then hit the Save button.

Now come back to frontend, your menu will be there.

Customize Header menu

Please go to Customize > Header > Header Menu to customize your main menu.

You’ll see an option to enable/disable the main menu and hamburger icon.

Other options are to customize the how the main menu looks like. Here’re few major options among them:

Navigation Font: To change your main menu font face. You can select a Google font, system font (eg. Arial, Times) or upload a custom font file.

Menu item colors: Include default color, hover color, active color

Item has children indicator content: By default, it’s an angle down icon.

Submenu Skin: There’re 2 skins light and dark. It’s light by default.

Submenu Box: This is a quite advanced option. It allows you to change the dropdown padding, border..

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

To set up category mega menu, please:

  1. Add the category menu item to the menu
  2. Check to “Enable mega menu”.
  3. That’s all. You don’t need any submenu item.

Now, it’ll show 3 latest posts when the reader hovers to your category mega menu.

Menu Icon

To set a menu icon, please enter the icon name in “Menu icon” field.

There’re 3 types of icon Fox supports:

1. Awesome icons, select icon in this list. Note that Fox only support Free Solid or Brand icons.

For solid icons, you only need to enter icon name, eg. file-alt, beer..

For Brand icons, you must add “fab” after the icon. Eg. facebook fab for facebook, twitter-square fab for twitter-square.

2. Feather icon, select icon in this list. You must enter full icon name, eg. the icon is “arrow-left-circle” then you must enter feather-arrow-left-circle to the field.

3. Image icon: Enter your image URL to the field, eg. https://yourdomain.com/somefile.jpg. Maximum image width is 60px.

Go toTop