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 drop-down menu. 

            • If your flyout menu has more than 1 level, it will show the next submenu level on left or right.
              You can change the direction of submenu level in Flyout submenu direction

            • You can also add background image in the submenu of Flyout. Read the Background image settings to learn more about this feature.
            Although background adding feature still appears in Flyout submenu type, for better display, we don't recommend using this feature. If you still want to add image into menu, remember to check your dropdown bar size carefully. 


            2. Mega Submenu settings 

            • Mega Menu exposes all submenu levels of it: 


            • To change the wideness of Mega menu, click on the pencil icon to edit the top menu → scroll down and find the Submenu width & position 
              • Full width (recommend): the width of menu box will be equal to the width of your top menu bar (which is based on your old menu's width).

              • Center: menu box will be aligned center to the width of the parent item. You can adjust the width by setting a number in "Width" option below.

              • Left/Right edge of Menu Bar: menu will be aligned left/right to the top menu bar. You can adjust the width by setting a number in "Width" option under Mega submenu position.
              • Left/Right edge of parent item: menu will be aligned left/right to the parent item. You can adjust the width by setting a number in "Width" option under Mega submenu position.
            NOTE: Position will not work with vertical menu.

            • Min height: Adjust your menu box's height by inputting the new number of height. 


            • Masonry-like: Auto arrange columns in any available space.
              Read this article to learn more about Masonry option.




            3. Tabs Submenu - Submenu settings

            • You can also change submenu position in Tab submenu position
              • Full width (recommend): the width of menu will be equal to the width of your top menu bar (which is based on your old menu's width).
              • Center: menu will be aligned center to the width of the parent item. You can adjust the width by setting a number in Width option under Tab submenu position.
              • Left/Right edge of Menu Bar: menu will be aligned left/right to the top menu bar. You can adjust the width by setting a number in Width option under Tab submenu position.
              • Left/Right edge of parent item: menu will be aligned left/right to the parent item. You can adjust the width by setting a number in Width option under Tab submenu position.
            NOTE: Position will not work with vertical menu.
            • To change Tab control position: click "Edit" the top menu > Tab position.


            • To change Tab control width: click "Edit" the top menu > Tab control width:


            • Adjust your menu box's height with Min height by inputting the new number of height. 


            • Masonry-like: Auto arrange columns in any available space.
              Read this article to learn more about Masonry option.




            4. Background image settings:

            • There are 2 ways to insert your image:
              • Upload directly: (only available in Premium plan)
                Click on "Browse" button → Select image in your computer → Wait a few seconds for it to upload
                Once the image is uploaded, you will see it under the upload field.
              • Paste image's URL: insert the link of your image
                You can upload an image to get its URL in your Shopify admin / Settings / Files / Upload file
                Once the image is uploaded, you will get a URL alongside its entry → Copy that URL and paste into "Background image" field.



            • Background repeat: in case the background image does not cover 100% area of the bar
              • Repeat: image is repeated horizontally and vertically (best for pattern background)
              • Repeat X: image is repeated only horizontally
              • Repeat Y: image is repeated only vertically
              • No repeat: image is not repeated and leaves empty space in the rest portion

            • Background position: align the image compared to the menu container

            • Background size:
              • Auto: image is displayed in its original size
              • Contain: 100% image is always on the menu, doesn’t matter what’s the width of your screen / which device you are on. (The preference is to show 100% image – the remaining area of the menu may have white space)
              • Cover: image covers 100% area of the menu and the rest portion will not be displayed. (Will cover the width & height – both; of the row. This means – some portion of the image can go off)

            Helpful?  
            Help us to make this article better
            0 0