4. Mega menu settings

This theme has mega menu functionality. You can set up a different photo for each category.

Click on Header to open settings. After general settings of a header, you will see Mega Menu settings.

Mega menu

Setting	Description
Enable mega menu	When you activate this feature, you have the option to display a mega menu with collection images on the right side when customers hover over a link. Alternatively, you can select one or two static collections to be showcased to customers.
Mega menu style	You have the option to choose from three different styles for your menu: Image on Hover: This style displays images when you hover over a link. When you move your cursor over links to collection pages, blog pages, or product pages, an image will appear on the right side of the menu (For a good view of this style we recommend adding a third level menu - check the screenshot below the table). Image Above a Link: In this style, images are placed above the links. This is particularly useful in mega menus, where images are displayed above links for collection pages, blog pages, and product pages. (To use this style, we recommend adding a second level menu). Static Collection on the Right: With this style, you can display a static collection on the right side of the menu. To set this up, choose “Collection 1” and “Collection 2” by clicking on “Select Collection” in the mega menu settings. These selected collections will be shown on the right side of the mega menu. Once you've selected the style that best suits your needs, remember to click “Save”. You can then preview your theme to see how the menu appears with your chosen style.
Mega menu animation	When you click on the link to open the mega menu, you can see a different view of the page under the mega menu. You can choose from these styles: None With overlay With shadow
Background color	To change the background color of the section, simply choose from the dropdown list option within the appropriate color for the mega menu: Main background; Section background 1, 2, 3, 4; Custom. *In theme settings, you can set these options for the entire theme.
Custom background color	Click on the circle to select a custom color for the mega menu.

Mega menu text settings

Setting	Description
Text color	Main Secondary *In theme settings, you can set these options for the entire theme.
Enable second level menu items custom font size	Mark the checkbox to add a custom font size for second level menu items.
Font size	Use the slider to set the custom font size.
Title style	There are two title styles: Default (Title case or sentence as you write in navigation names) Uppercase
Enable third level menu items custom font size	Mark the checkbox to add a custom font size for third level menu items.
Font size	Use the slider to set the custom font size.

Style: Mega menu image on hover

Setting	Description
Default mega menu image	Select a default image (upload or choose from library or explore free images). *An image is displayed in the mega menu and mobile menu as the default image, and it will be replaced by the product, collection, blog post image upon hover.
Image ratio	Adapt to image: Uses the aspect ratio of the images. This prevents the images from being cropped. Landscape: This option crops the images to a 3:2 ratio, where the width of the image is 1.5 times the height. It is ideal for images that have a wider or landscape orientation. Portrait: This option crops the images to a 2:3 ratio, where the height of the image is 1.5 times the width. It is suitable for images that have a taller or portrait orientation.
Hide mega menu image component	When it is marked, a mega menu shows without an image on desktop.
Hide mega menu image component for mobile	When it is marked, a mega menu shows without an image on mobile.

Mega menu static collection on the right

Setting	Description
Static collection 1 in the mega menu	Add collection to be displayed first on the mega menu.
Static collection 2 in the mega menu	Add collection to be displayed second on the mega menu.

Mega menu animation, for example with overlay

Mega menu style - Image on hover

Mega menu style – Image on hover (Recommend to use third level menu for this style)

Mega menu style – Image Above a Link (We recommend adding a second level menu)

Mega menu style – Static collection on the right

You can create and customize collections in the "Navigations" section in Shopify Store for Mega Menu. By opening the "Main Menu" and adding collections, you can organize and display various categories such as home goods, baskets, mirrors, or furniture.

When a user hovers over each collection in the menu, the featured image of that specific collection will dynamically change. This interactive element provides a visual preview and helps users quickly identify the content they are interested in. The Mega Menu style “Collection image on hover” should be selected to use this feature.