How to add items vertically in mega menu

How to add items vertically in mega menu

Mega menu is a type of expandable menu which shows submenu items in horizontal order.



There are 2 ways to adjust the position of menu items in vertical order:

1. Set Column width

Set a number of columns which an item occupies in Column width, then when the total of columns in a row exceeds 12, the next item will be dropped to second row.


For further explanation of Column width, please read this article.


2. Place submenu items in a heading item

Submenu level 1 shows in horizontal order, but submenu level 2 will show in vertical order. Hence, putting submenu items into a heading item will make them turn into submenu level 2 and show vertically.



For example, we have a mega menu with 5 products sorted horizontally. Follow these steps below to make the last 3 products listed vertically.



  • Add a submenu item > temporarily call it "New".
    Enable "Display as heading item" (optional)



  • Drag the last 3 products and drop under the "New" item to make them submenu items of it. Then you'll have 3 items listed vertically.


Done.


    • Related Articles

    • Arrange menu items in Masonry

      Masonry is available in Mega menu & Tab menu. Edit a Top menu item → scroll down and you'll find an option named Auto arrange columns in any available space (organized into Masonry-like) - enable this option will place menu items in Masonry grid. ...

    • Why is my Smart Menu not showing up or showing incorrectly?

      There are various reasons why Smart Menu is not showing up or showing incorrectly on a store. Please read these cases and check the following solutions. Loading time Our server is placed in the US, therefore, there might be a delay in loading time ...

    • How to show Smart Menu on your store

      After creating your menu in Smart Menu, you can choose a current menu on your store to be replaced with Smart Menu. There are 2 ways to do it: Auto - Replace Main menu, Manual - Replace menu from Shopify or Manual - Replace menu by CSS selector. ...

    • Submenu settings

      There are 3 types of Submenu: Flyout (tree) menu, Mega menu & Tab menu. Click the pencil button to edit a parent item and choose among the 3 types.   1. Flyout menu settings When selecting Flyout Submenu type, your menu will be displayed as a normal ...

    • Frequently Asked Questions for Smart Menu

      What is the difference among Free, Basic and Premium plans ? Please see the comparison table of three plans here. Can I downgrade to Free/Basic plan after upgrading? Yes you can. To cancel paid plans, please go to "Profile" page > click on "Cancel ...