Arrange menu items in Masonry

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.



When Masonry is disabled, the position of menu items in the second row depends on the height of the first row, which can leave empty vertical space.



When Masonry is enabled, menu items will place in optimal position based on available vertical space, sort of like a mason fitting stones in a wall:


When Masonry is enabled, you can set the number of columns you want to divide the menu into. Columns will be divided equally, and the "Column width" set in each menu item will not work.


Columns in masonry don't place in left-to-right order. The position of columns depends on the available vertical space. This is the algorithm of Masonry layout:

So in menu, it looks like this:


NOTE: Recommend to disable the "Edit on Preview" to see the right position of menu items in Masonry.

    • Related Articles

    • Column Width - adjust width of menu items

      A menu is divided into 12 columns in total. The Column Width helps to adjust the number of columns which an item occupies in total of 12 columns. To adjust the width of a specific menu item, edit the Column width of it. You can find this option in ...

    • 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. ...

    • 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 uninstall Smart Menu completely?

      UPDATE (30.11.2023): With users installing our app after November 30, 2023, the app does not add any code or store any file in the theme anymore. Therefore, you don't need to delete anything after uninstalling the app. When installing, Smart Menu ...

    • 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 ...