8. Vantage Theme: Setting up the Header

In this article, we will go through the process of setting up the Header Section. 

Header Settings

The Vantage theme has many options for controlling the layout, look, and style of the header. Here is a breakdown of the options, what each will do when adjusted, and how to set it up.

Enable full-width

Show the header and navigation at full-width. If you keep this unselected, it will be constrained to a maximum width of 1200px.

Logo Inline with Navigation

Choose to position the navigation below the logo on its own row or inline in the same row as the logo.

Left Align Logo

Align logo to left or center.

Cart Link in Announcement Bar

Choose to place the cart link in the Navigation bar or the top Announcement Bar.

Announcement Bar Links

Now included in Vantage 7.0+ the header can now support a secondary menu with your header, we recommend keeping this  to a shortlist of links to keep this from line wrapping

Announcement Bar Text

Add a message in the top bar informing customers of Sales, Shipping deals or just a welcome message. With independent control for text size and link it to a page on your site or external link.

Logo

Add a logo image and control the logo width. If you do not upload an image the logo defaults to text only and you have options to choose the logo text case and weight. This also allows you to modify the size of your desktop logo.

Mobile Logo

This affords you the options to upload a separate logo specific for Mobile. 

Please note: Horizontal mobile logos are recommended

Navigation Style

Choose between a full or mobile (hamburger icon) layout for your main navigation. Then choose which menu will be the primary navigation you want to show by clicking the Main menu.

Trigger and Drawer position

This will allow you to adjust the positioning of the mobile navigation button and menu to appear on the left or right side.

Navigation Content:

The Vantage Ver 7.0+ theme introduces some new features to the header which allows content blocks to be added to your header area. Click the add content button near the bottom of the header settings and this will allow for the following new options

Collections mega menu:

The Collection mega menu feature allows you to target a specific main menu link and assign multiple collections within a dropdown for this link.

This feature includes the following settings

  • Image Ratio - This allows you to choose the format in which your images display. Vertical, Horizontal or Square.
  • Font Size - Adjustable sliding scale.
  • Collection # - This feature allows you to select which collection you would like to appear within the collection mega dropdown.
  • Collection image - This allows you to assign a custom collection image for this collection to appear.

Links in Columns:

The Links in Columns feature allows you to target a specific main menu link and set this up for columns of links.

This feature includes the following settings

  • Menu Item - Enter the main menu item to apply a mega menu. This menu will display a maximum of six link columns. Set up link lists within the Admin > Online Store > Navigation.
  • Links alignment - This aligns links left or center.
  • Header Font Size - This allows you to adjust the font size of the header links within this mega menu.
  • Submenu Font Size - The submenu font sizes will allow you to adjust the size of the links within each column.

Links in Images:

The Links in Images feature allows you to target a specific main menu link and assign multiple collections within a dropdown for this link.

This feature includes the following settings

  • Menu Item - Enter menu item to apply a mega menu. This menu will display a maximum of three link columns and three custom photos. Set up links within Admin > Online Store > Navigation.
  • Links alignment - This aligns links left or center.
  • Image Ratio - This allows you to choose the format in which your images display. Vertical, Horizontal or Square.
  • Select a featured image # - This will allow you to assign a custom image within one of the three columns.
  • Featured image label # - Label associated with this image.
  • Featured Image link # - Link of the page you would like to display when this image is selected.