Skip to main content

: Mega menu

  • Updated

How to find these settings...

  1. Online Store
  2. Customize (Theme Editor)
  3. Header
  4. Left column, access content blocks using black arrow next 'Header'

By default, menus with sub links will be simple dropdowns.  You can choose to customize the dropdown to use a mega menu, story bar or contact bar.  Each will have additional options and promotions.

 

Recommended reading

In this section...

 

Settings

Link title

Type the menu title you want to associate the block to.  It is recommended to use a collection or product link to take advantage of images.

NOTE: This must match the title capitalization and punctuation exactly:

bespoke-mega-menu-link-title.png

Sub links will be displayed in each column:

bespoke-mega-menu-sub-links-menu.png bespoke-mega-menu-sub-links.png

 

Custom link color

Choose a custom color for the link title

 

Font

The second level links can be displayed in 1 of 3 ways set in Theme Settings > Typography:

  • Body
  • Primary
  • Secondary

 

Size

Set the menu link size with the slider. 8px is the minimum, and it steps up by 1 to a maximum of 30px

  • Mobile: Screens less than 768px wide
  • Desktop: Screens larger than 768px wide

 

Text size

Set the sub menu link size with the slider. 8px is the minimum, and it steps up by 1 to a maximum of 30px

  • Mobile: Screens less than 768px wide
  • Desktop: Screens larger than 768px wide

 

Minimum number of desktop link columns

The number of columns displayed on a full width screen.  This number excludes the Promotion. 2 is the minimum, and it steps up by 1 to a maximum of 6

 

Horizontal alignment

If content does not occupy the full space, content blocks can be aligned to the left, right or centered

 

Enable slider

Columns can be listed in a slider or a more traditional, stacked grid

 

Uppercase heading

Use uppercase fonts for the headline links

 

Center text

Center all of the links

 

Layout

Choose from 1 of 4 design options:

  • 1: Large image on top, with link listed underneath
  • 2: Headline link listed first, with image & links listed in 2 columns
  • 3: Headline link listed first, with image & links listed in 1 column
  • 4: Headline link listed first, with image & links listed in 1 column with a border

 

Text color

Choose a custom color for the text

 

Text color hover

Choose a custom color for the text hover

 

Button text color *

Choose a custom color for the button text hover

 

Line color

Choose a custom color for the lines and borders

 

Background color

Choose a custom color for the background

 

Background color gradient

Choose a custom gradient for the background

 

Background/Overlay color opacity *

When a background color has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 1 to a maximum of 100%

 

Image

Choose from 1 of 3 options for the image:

  • None: Exclude an image
  • Collection: Use the collection image
  • Product: If the link is a collection, choose the first product image instead of the collection image

 

Image aspect ratio

The image has 4 options for display:

  • Natural:  Uses the height of the image
  • Short (4:3): A landscape format will be applied
  • Square (1:1): A square format will be applied
  • Tall (2:3): A vertical format will be applied

 

Enable image crop

The image will crop to fill up the container format chosen with 'Image aspect ratio'. NOTE: If disabled, white space will be applied around the image. Has no effect when media aspect ratio is set to 'Natural'

 

Corner radius

Round the corner of the image by adjusting the slider.  0 is the minimum, and it steps up by 1 to a maximum of 100

 

Focal point

Similar to setting a focal point on a theme image, background images can specify the main focus of the image

 

Insta filter

App like filters can be applied to your images

 

Promotion

Enable promotion

Add a promotion to the mega menu

 

Promotion position

Choose to display the promo at the beginning or end of the sub links

 

Text

Add text to describe or highlight the promo

 

Link

Add a link using the link picker or type your own

 

Link text/SEO Title

Add a text to describe what action to take for the link

 

Style

Choose 1 of 3 styles:

  • Text
  • Primary button
  • Secondary button

 

Text alignment

Text can be aligned to the left, right or centered to the container

 

Text position

Choose 1 of 4 positions:

  • Split
  • Top
  • Center
  • Bottom

 

Show border

Add a 1px border to the content

 

Text color

Choose a custom color for the text

 

Text color hover

Choose a custom color for the text hover

 

Button text color *

Choose a custom color for the button text hover

 

Line color

Choose a custom color for the lines and borders

 

Background color

Choose a custom color for the background

 

Background color gradient

Choose a custom gradient for the background

 

Background/Overlay color opacity *

When a background color has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 1 to a maximum of 100%

 

Desktop image

The desktop image will be displayed when the container is greater than 768px wide. NOTE: Background images can use Focal Points to specify the main focus of the image. Learn more about Focal Points

 

Insta filter

App like filters can be applied to your desktop image

 

Mobile image

The mobile image will be displayed when the container is less than 768px wide. NOTE: Background images can use Focal Points to specify the main focus of the image. Learn more about Focal Points

 

Insta filter

App like filters can be applied to your mobile image

 

* NOTE: May not be available on all sections, blocks or templates