Header settings

Everything you will need to know on how to setup your header

Jalal avatar
Written by Jalal
Updated over a week ago

The header settings make it possible for you to fully customize the header of the theme. Upload your logo, move the search bar etc.

Another example:

To change/configure the header, you'll first have to go to the settings.
You do this by simply clicking on the 'Header' to open the settings.

Once you've clicked on header, the settings will open in the right sidebar!

Configure the header

After clicking the header you will see many options to customize the header:

Layout:

The layout setting provides you with many header templates you can choose from, this will determine the look (and layout) of your header.

Choose from:

Width:

By default, the header content will be 1600px but you can change width using the width setting slider.

Minimal Height:

You can use this setting to control the height of header from small, medium and large all responsive sizes.

Header border opacity:
Control the header border opacity.

Header border width:
Control the border width from fullwidth/box-width options.

Transparent header:

Check this option if you want a transparent header. Only applicable with flexible and slideshow section.

Colors

Top bar color scheme:
Select the color scheme for the top bar (the bar with the feedback widget, customer service link and language selector)

Main bar color scheme:
Select the color scheme for the main header, where your main header elements are, like your logo, search bar, button etc.

Search bar color scheme:
Select the color scheme for the search bar, this will change the background of the searchbox and the text.

Menu bar color scheme:
Select the color scheme for the horizontal menu bar, as stated above, you can activate this option later in the header settings.

Top bar

Enable top bar:
The settings already tells you what it does, check this to enable the top bar.


Top bar font size:
You can control the font size of top bar content.

Extra menu item in top bar:
You can enable an extra link for the top bar, use this for quick access to for example the customer service page!

Icon:
The icon will show besides the extra menu item.


Link:
Set the link of the extra menu item here, for example the customer service page.

Enable slider:
Do you want the topbar items to show in a slider?


Show slider arrows:
Do you want to show slider arrows so customers can click through the USPs?

Enable autoplay:
Do you want the items to autoplay? So the items will slide automatically.

Seconds between slides:
Set the seconds between the slides.

Logo:

Logo width:

Control the width of logo, the logo has a maximum height of 130px.

Show country selector:
Check this if you want the country selector to show up in the top bar.

Show language selector:
Check this if you want to show a language selector in the top bar.

Search bar

Search bar height:

Choose small, medium, or large size.

Search bar width:

Control the width of search bar.

Search Bar Font Size:

Opt for small, medium, large, or extra-large text.

Sticky Header:

Enable Sticky Header:

Toggle on for a fixed header during scrolling.

Sticky header or menu:
You now have an option to select if you want to have sticky menu or full header.

Cart icon:

Cart icon:
Select the cart icon you want, there are different styles to choose from!

Cart items indicator color scheme:
Set the color scheme for the items indicator (circle with number of items in the cart)

Show total price:

Check this option if you want to have price showed beside cart icon.

Navigation menu

Menubar Height:

Choose between Small, Medium, or Large for the menu bar height.

Menu Type:

Select between Mega Menu or Dropdown Menu for your navigation style.

Show Collection Images in Menus:

Display collection images before the title in menus.

Show Collection Images in SubMenus:

Display collection images before the title in submenus.

Auto-fill Collection Images:

Automatically use the first product image when a collection image is missing.

Show Collection Images in circle:

Display collection images in circle layout.

Alignment Menu Items:

Choose from Left, Centered, Right, or Divide Evenly alignment options for menu items. (Applicable when 'menubar' is enabled in header layout.)

Main menu items clickable:

Enabling this option will make the main menu items clickable.

Enable arrows for submenu items:
Display arrows for the submenu items.

Menu Font:

This option allows you to specify the font style for your menus.

Menu Font Size:

You can adjust the font size of your menus using this option. A value of 15 is set to maintain readability while ensuring a sleek menu appearance.

Menu Letter Spacing:

This option controls the spacing between letters in your menus.

Dropdown menu

Submenu Items per Column:

Specify the number of submenu items displayed in each column. You can also display column border lines in the mega menu columns.

Dropdown Font:

You have the flexibility to customize the font style for your dropdown menus.

Custom Font Size Dropdown:

Enable this option to have a custom font size dropdown in your menus.

Font weight megamenu items:

Control the font weight for the menu items.

Trustmark

Image:
Want to use a trustmark, you can upload the image here.

Max. image width:
Select the width of your trustmark image.

Trustmark link:
Fill in the link of your trustmark page, this will open when the customer clicks on the image/logo.

Button

Show button:

Enable this option to have a login button in the header.

Button label:

Add a button label by default it says Dealer login.

Button link:

Add a link for your button, this will overrule the button link to the page.

Button color scheme:

Select a button color scheme for the button displaying the header.

Button styling:

Select the button styling between fill and no fill.

Online store

Disable cart and account:
Want to use your store as a online catalog, then this option is perfect.
You can disable the cart and account pages, so customers can't order online.

Mobile Layout

Header layout:

Select the header logo center/left and right.

Mobile logo width:
Configure your logo width for mobile here, this will make the logo wider.

Compact search icon:

Check this option to have a compact search icon in the header.

Menu font size:

Control the menu font size in the mobile header.

Extra blocks

Ofcourse you can add new blocks, like the 'Menu promo collections', or some 'Information' in the top bar.


To add blocks you simply click on the 'Add block' button in your sidebar on the left of your screen.

Top bar information settings

Heading:
Fill in your information, for example: Free shipping for orders above $25,-

Promo banners

Other than these 2 menu items, you have 2 new blocks in Next theme:

These can help you create promo banner inside the mega menu > sub menu items:

You can create something awesome with these new blocks. Looking forward to seeing your creations.

Did this answer your question?