How to create a new Horizontal Mega Menu

Modified on Wed, 15 Sep 2021 at 05:59 PM

TABLE OF CONTENTS

Horizontal Mega Menu

--------------------------------------------------


You can follow the continuous guidance in the clip version about how to customize the verticle mega menu that has the same settings as the horizontal mega menu. 




You can revise the information on the specific guidance below on how to customize the horizontal mega menu in case you missed any information on the clip.



I. Add Main Verticle Menu 

Click on the Header section, scroll down to the Horizontal menu settings and select the menu you want. You can edit that menu by clicking on the Edit menu under its title, then you'll be moved to the Shopify admin - Navigation to edit its menu. After editing the menu successfully, you turn back to the store settings and we suggest that you should reload the page to update the changes to the menu.


Or you can edit the menu or create a new horizontal menu by logging in to your Shopify admin directly > click on Online Store > then select Navigation option under > you can add a new menu or select the existing menu to edit



II. Verticle Menu settings


1. Trigger Navigation

In Menu settings at the Header section, click on the Horizontal Mega Menu to add blocks


Select Trigger Navigation to add it to the horizontal mega menu

  • Title: Please enter the exact title of the menu in your admin that you want to add to the mega menu. E.x: Shop,Portfolio,..
  • Background image: click on the select image to upload the one you want to be set for the background of this whole section

Choose an option from each field under to modify the image background

  • Background size
  • Background position
  • Background repeat


Moreover, you can create the menu list, multiple product, image, banner, single product for that menu. Be noted to place those blocks under the trigger navigation



2. Menu list

Click on the "Add block" to add the Menu list to the trigger navigation

  • Block title: enter the title for this block 
  • Menu: press the button to choose the existing menu, then you can change, remove, or edit that menu. 
  • Width: drag to set the width for the block



3. Multiple product 

  • Block Title: give it title for this block
  • Title: give a title for this multiple product menu
  • Link: click on the box to paste or search a link 
  • Width: drag to modify the width for this block 
  • You can choose the menu to upload on the product 1 and product 2 to display 



4. Image 

This block is not working on Mobile

  • Image: Choose an image to show 
  • Width: and drag to adjust the width for this image block
  • Link: paste or search an available link



5. Banner

  • Title: Input a title for the banner, 
  • Background color: choose a color for the background by using the color picker 
  • Width: drag to change the width for this banner section
  • Image: Select an image to show


  • Insert contents for text 1 and text 2


Button

  • Label: Enter the name of the label button, Eg: View Details
  • Link: Paste a link or search it from the existing menu 
  • Style: drag to choose a button style from 1 to 3



Section under

  • Image: select the image to display 
  • Text: enter the text to the box
  • Link: paste or search a link to attach it to the image


6. Single product 

  • Title: give this block a title
  • Width: drag to adjust the block width
  • Product: choose a product to show and drag to adjust the width between the products.






Please click Save on the top right of the screen to save the changes that you just input.

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