Column Width - adjust width of menu items

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 the item editor on left panel

​
  
or hover on that item on preview panel and click on ↔ button
 

  • This item will have the width = exactly the column width you set.

  • When the total of items' columns in a row exceeds 12, the next item will be dropped to second row.

  • If all items set Column width as Automatic, they will be equally distributed on the total of 12 columns. (For example: if a menu has 3 submenu items, this menu will divide place 3 items in 3 columns equally as 4/12).

  • If an item has a fixed column width (eg. 3/12), but other menu items are set as "Automatic", they will auto adjust their width to fit the remaining space on a total of 12 columns.
    (For example: if a menu has 2 submenu items and you set the width of first item to 8/12, then the latter will auto adjust width to 4/12).


For image, you can set a fixed Image width, but this image width can't exceed column width.
Column width does not work if you enable Masonry feature. Read more about Masonry here.


    • Related Articles

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

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

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