Header

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.

  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 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:

  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.

Demos $41 Buy

Prebuilt Demos

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.

  • All
  • Blog 18
  • Magazine 21
  • Newspaper 7
  • Elementor 20
  • WooCommerce 5
Popular
Live preview
AuthorBlack WhiteBlogCleanGridMagazineNewspaperTimesTimes WriterWriter
Live preview
Black WhiteCinemaClassicCleanGridHistoryMinimalMusicPaper
Live preview
BusinessFinanceHistoryNew York TimesNewsTimesWorld
New
Sophia Demo
Live preview
BeautyBlack WhiteChicCleanDIYElegantFashionGridLifestyleSophiaTravel
Live preview
Black WhiteBusinessCleanFinanceHistoryNew York TimesNewsNewspaperPaperTimes
New
The Fox Guard
Live preview
CultureGuardianLondonNewspaperObserverOpinionThe GuardianWorld
Live preview
ArtsArtworkBlack WhiteBooksCartoonCommentaryCultureIllustrationMinimalNew YorkerPoetryPoliticsReader
Live preview
Bill GatesBooksNGOSquareWorld
Live preview
BusinessFinanceHistoryNewsTimesWorld
Live preview
CleanFoodMasonryMinimalPinePinterestTypography
Live preview
AuthorBlack WhiteCleanDanielMinimalWriter
Live preview
DeepGridJohnMusicNostalgicSimpleSquareVintageWriter
Live preview
AuthorBlack WhiteCleanPaperSimpleWriter
Live preview
BusinessHistoryNewsPoliticsTimesWorld
Live preview
BiologyChemistryCleanHealthMathsPhysicsScience
Live preview
Artificial IntelligenceBiologyBlack WhiteChemistryMassaMathsMITNaturePhysicsScienceSpaceTechnology
Live preview
CleanLifehack
Live preview
ArtsCinemaEntertainmentMazedMusic
Fox Geometry
Live preview
GeometryGridTechnology
Live preview
BernCinemaEntertainmentInterviewMovieMusicPhotography
Live preview

Mia

ElegantLifestyle
Live preview
BazaarBlack WhiteChicCleanElleFashionInfluencerInstagramLifestyleMinimalVogue
Live preview
MotorsPhotographySmokeTravelVinsmokeWriter
Live preview
BusinessFinanceHistoryNewsTimesWorld
Live preview
GeekGizmodoJalopnikLifehackQzTechnologyTheVerge
Live preview
BusinessCultureMasonryNewspaperTimesWorld
Live preview
BlogDeodarElegantFeminineFoodGirlyGridHerbLifestyleTravel
Live preview
DecorInteriorMinimalNordicScandinavian
Live preview
ChicDecorHomeInteriorMinimalNordicNorwayScandinavianStockholmSweden
Live preview
DarkElegantHipsterLifestylePhotographyTravelVintageWillow
Live preview
MinimalPhotographyToursTravel
The Fox Brooklyn
Live preview
Black WhiteBrooklynWriter
Fox Fashion
Live preview
BazaarElleFashionSquareVogue
Live preview
ChicInfluencerInstagramKinforkLifestyleMagazineMinimalSmooth
Live preview
AuthorBlogCleanMediumMinimalSimpleWriter
Live preview
CookingFoodRecipe
Buy The Fox