Menu Options

Layout:

The layout options determine which menu you are currently using. These options change the appearance of where and how your categories, sub-categories and images (left-to-right only) are displayed. 

 

Left to Right: 

The Spacing feature determines the width of the Menu.

The padding determines how much whitespace is above and below your categories within the menu. Good for theme's that leave a gap in your nav bar.

The Left to Right menu option features images - it displays them as portrait so add in your Shopify collection images accordingly. We recommend the default size of 80% for images within the Bacon Menu. 

These are the options for the Left-to-Right Menu: 

 

Top Down:

For more products (between 20-30) we recommend the Top-Down menu. This menu can be set up to display across the entire page or condensed. Use normal spacing for a moderately sized menu. Use Wide for a menu that spans the width of your page. Use compact for a smaller condensed menu.

Row padding determines how much space is between sub-items - having it set to compact with a lot of items can make it look less than optimal so for more products we recommend using the normal setting.

Columns can be used to layout your categories and sub-categories in an awesome way. We recommend setting the columns to that number of categories in the menu - this allows a clean uniform look throughout. 

Sub-items per column is the same. Although with an odd number of sub-categories it can get messy. Depending on whether your sub-categories are even or odd adjust the numbers accordingly and you should have a beautifully laid out menu.

These are the options for the Top-Down menu:

Stack -

The Stack menu is by far the cleanest and simplest menu. It adopts similar features to the Top-Down menu and you can follow the same procedure in setting up this menu. 

Refer to our Demo Site for examples of each menu option: bacon-menu.myshopify.com

These are the options for the Stack Menu.

 

Wording:

This section determines whether to show the link to "See All" of that specific collection. Good for when you want to direct your customers to see your products.

 

Color:

Background Color: changes the color of the white-space within the Bacon Menu. Default is white - what I have set in the screenshot is a dark - grey.

Highlight Color: determines what color it changes to when you hover over the collections or products within the Bacon Menu.

Link Color: determines the inactive color of the links within the Bacon Menu.

Border Color: determines the color of the border.

Refer to: Bacon-menu.myshopify.com for liberal examples of how these colors are used and changed. 

 

Arrangement & Style:

These menu options are explained within the app, however we will go over Z-index.

Layer height: think of this as the topography of your website. Some themes have content set to a ridiculous layer height of 9999 or 7777. So the Bacon Menu will display "under" or "behind" it. When this occurs simply set the z-index section to a numerical value "above". I usually set it to 10,000 in those cases. Default is 300.

 

Interaction:

Trigger event: there are two options here. 1) hover 2) click.

Close Menu Delay: determines how long the menu stays open. Default is 200 milliseconds. Although 400 ms and 500 ms is usually good if the navigation is set away from where the menu opens on your site.

Animation: Slide, Fade, None. If your site is a little slow on the loading side, we recommend setting this to none. It's very clean and is quicker to load out. 

 

Mobile:

Mobile Breakpoint: this is probably the most important aspect of the Bacon Menu experience. You will NEED to make sure this is set correctly so your customers can access your shop via mobile interaction. In most theme's this breakpoint is at 769px or 1033px. We cannot account for all theme's so please make sure to set this correctly. 

Text-alignment: this is incredibly useful for appearance of your mobile menu. If you have a left-side-bar menu leave it set to the default "left". If your mobile menu appears in the center, you will need to change this portion to center. Same goes with a right aligned mobile menu. 

Disable at width speaks for itself. 

 

Apply these options to all menus:

This option is at the bottom of menu options. This allows you to establish the changes to all menus. Only apply if you wish to change every single menu to this menu.

                     

 

 

 

                              DON'T FORGET TO SAVE YOUR CHANGES!!!

                                           

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk