Table of Contents
Fox comes with few header layouts, here’s their demos:
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.
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.
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.
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.
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.
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.
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..
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.
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:
To set up category mega menu, please:
Now, it’ll show 3 latest posts when the reader hovers to your category mega menu.
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.
Below demos are just examples. More to come in the future and you can mix their features. If you see one feature in a demo, you can use it in any other demos. All demos are included in the download package and ready to import in 5 minutes.