Header Style 5

Modified on Mon, 22 Apr 2024 at 05:21 PM

TABLE OF CONTENTS


I. GENERAL SETTINGS

1. Logo -Desktop

Type: choose a type to input the logo (SVG/ Image) 

Then select image to show or insert logo code in SVG (based on the type you choose, the system will show the exact logo in that type)






3. Navigation
Select an menu to show it on:

  • Main menu: The main menu is usually displayed as items across the width of the header (Horizontal).
  • Vertical menu: The verticle main menu is usually displayed as a list of items in a homepage sidebar (Verticle)
  • Mobile menu: This kind of menu is optimized for mobile devices.


To learn how to create menu in multiple levels (dropdown), please check out the official Shopify documentation





4. Menu Flyout Left

By default, the submenus will be aligned to the right hand edge of the parent item. To align the flyout menu to the right hand edge, you need to enter the menu title, if there are any menu titles, you need to add a separator ; for each. 

E.g: Home;Catalog


5. Highlight menu

Enter menu title into the box, add separator if there're many titles

E.g: Home;Catalog



6. Menu label

Enter menu title into the box, add separator if there're many titles 

E.g: Home;Catalog

  • Text: enter the text to show as label next to the menu title 
  • Menu title: enter the title you want to attach the label


II. BLOCK SETTINGS

Add blocks to enable the navigation for main menu and vertical menu




When you want to enable the navigation, you must add the block "mega trigger" first and then leave other blocks under it [+menu], [+banner], [product]...



[+] Mega Trigger


- Please note that the name of Menu iteentered in Mega menu trigger field must match the name of one of the first-level menu items.




[+] Menu

  • Block label: you can give this menu a name to easily identify it later
  • Heading: enter text to show heading on menu item
  • Width: adjust the width for this item column
  • Menu item: select the menu item to display
  • Tick to show submenu


[+] Product

  • Block label: you can give this menu a name to easily identify it later
  • Width: adjust the width for this item column
  • Product: select the product to display



[+] Banner

  • Block label: you can give this menu a name to easily identify it later
  • Width: adjust the width for this item column
  • Heading: enter text to show heading on menu item
  • Image: select an image to show as banner
  • Link: paste a external link or search a destination from the system to attach it to the banner


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article