Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Header Menu Config

Alfred

Written by Alfred

Last updated

4238 views

On this page


This guideline helps you create the header menu with Base Item, Dropdown Item and Mega menu Item.

Go to Header inline > Add block > choose a block that you want.

2023-05-12_17-02-28.gif

1. Base Item

This is a simple menu item, you can choose the URL to redirect when the customers click on the item.

base.webp

2. Dropdown Item

With Dropdown Item, it allows you to select only one menu to show as a dropdown.

You need to create the menu in Online Store > Navigation:

naviga.gif

Note: Shopify allows you to create a Navigation up to 3 levels, so the maximum level for dropdown is 3.

This is dropdown layout in Kalles, Ocolus theme (sub-menu on the right side)

2023-05-25_15-41-12.gif

This is dropdown layout for Gecko, Unsen theme (sub-menu under the parent item)

gecko.gif

3. Mega item

Mega menu is a type of expandable menu in which multiple choices are displayed in a drop-down layout. It is a great design choice to accommodate a large number of options or to display lower-level pages that appear in the menu Header.

This is an example of a mega menu:

example mega.gif

3.1. Connect Header Inline and Mega Menu

To create Mega menu, you need to connect the Mega Item of Header Inline and Mega Menu(Parent) of the Mega Menu by choosing the same ID.

There is a total of 16 IDs here, from #1 to #16. It means you can create up to 16 mega menus.

For example, Header Inline: Mega Item - SHOP - the ID to connect is #2;

header3.gif

The Mega Menu: Mega Menu (parent) to connect with this header needs to set ID #2.

header2.gif

3.2. How to add content for Mega menu?

To add content to Mega menu, please put the child blocks below Mega Menu (Parent).

header4.gif

Mega menu has many child blocks, click Mega menu > Add block:

  • Mega Menu (Parent)

  • Linklist (child), Linklist 2 ( child )

  • Product (child), Collection (child)

  • Banner (child), Blogs (child)

  • HTML (child)

You can check this video below to know more about these child blocks:

  • You can drag blocks to arrange them:

4. Header section settings

Click on HEADER section, there are many options for you to config the header.

11.gif
  • Header layout: choose different position of logo, search form, and menu. You can check video below to know more:

  • Config Header height on desktop, tablet and mobile.

  • Main menu align, Hover effect for the menu

4.1. HEADER COLORS

Config background color, text color, etc...

2023-05-13_14-15-55.gif

4.2. HEADER GROUP BUTTONS

Choose design icon, enable/disable search, account, wishlist icons, cart style.

13.gif

If you tick "Show account icon" but the icon still not show, please go to Shopify Settings > Customer accounts > enable “Show login link in the header of online store and at checkout”:

account.gif

4.3. STICKY HEADER

Sticky header always shows when you scroll up/down the page. Please check this video to know more about Sticky header.

4.4. TRANSPARENT HEADER

The background of the header becomes transparent with the background of the section behind it.

transparent.gif

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

We highly recommend Shopify apps from our partners.

We uses cookies to ensure you get the best experience on our website.