Table of Contents
Header Layouts
Fox comes with few header layouts, here’s their demos:
- Stack 1: Navigation bar above, Logo below.
- Stack 2: Logo above, Navigation bar below
- Stack 3: Logo above but same row with social icons and search icon, Navigation bar below
- Inline: Logo left, all others are on the right.
The Minimal Header demo is not a new layout. It’s just inline header layout with the main menu disabled and the hamburger button enabled.
To customzer header layout, go to Customize > Header Layout section. Here’s the list of options:
Header Layout: Select the header layout among predefined layouts.
Navigation border: If you don’t change it, the default navigation border will be set for each layout automatically. Only stack layouts have navigation border. It doesn’t work for header inline.
Navigation border color: Color of the border.
Header Components
The header includes: Logo, Main menu, Social Icons, Search Icon, Hamburger button.
Because header menu is a quite long topic, please scroll down to this section to read about it. Here we talk about other header elements.
Header Logo
To set up logo, please go to Customize > Header > Header Logo. There’re 2 logo options: Text and Image.
For text logo, you can set logo font face, responsive sizes, weight, color..
For image logo, you can upload your own image logo and set logo width.
Please note: If you want your logo to be retina-ready, please prepare a double-sized image for your intended size. For instance, if you want your logo width to be 220px, please upload a 440px image.
Logo Custom Link: By default, the logo links to your homepage. Enter a custom link if you want your logo to link to an other URL.
Header Social Icons
You can set up social profile and Customize > Social Profile. Enter your facebook, twitter, instagram.. links into those social fields.
Then go to Customize > Header > Header Layout > Header Components to enable/disable social icons or change their size or style.
Header Search
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.
- Create a new menu, eg. My search suggestions.
- Add menu items into the menu. May be some popular categories, tags, articles, pages..
- 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 Navigation 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. Read Typography article to understand the concept better.
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..
Minimal Menu, Off-canvas Menu
Whatever you call it, it’s the off-canvas menu on the left side, will be opened when the visitor click to hamburger button. It serves as the menu on the mobile by default. However, you can also enable it on desktop screens too.
To enable hamburger button on the header, go to Customize > Header Navigation > Off-canvas hamburger button and choose “Enable”.
If you want to make your header have “minimal taste”, you can also disable the main menu there.
When you click to the hamburger, it opens the off-canvas menu. To set up and customize off-canvas menu, please read the Mobile article.
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:
- Add the category menu item to the menu
- Check to “Enable mega menu”.
- 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.