User Guide

Search limit to:






How to set up the Banner menu style?

by Admin on Sep 24, 2024

 

Step 1: Access the Theme Editor by selecting Online Store > Themes > Customize on the Eurus Theme.

Step 2: Under the Header section, click Add block and choose the Banner menu.

Step 3: (Important step):  Give the main menu a title:

Enter the menu title in the Menu Item field on the right panel.

⚠️ You must enter this field for your menu to appear on site.

Step 4: Customize the Banner menu, here are some things you can do:

📌 To attach a link for the main menu:

Click to choose or enter a link in the Menu item link field.

(Optional) Check the box to open the link in the new tab.

📌 To set up the banners on the menu:

With Eurus, you can add up to 5 banners in the mega menu:

Scroll down to the Banner 1 section, and you can:

What you can do:

How to do it:

Add an image as the banner

Customize the content:

  • Heading
  • Subheading
  • Text

Adjust image overlay

Add a button on the banner

Change the content alignment & position

If you want to add more banners to the menu, do the same for Banner 2, Banner 3, Banner 4, Banner 5

📌 To add a label on the menu:

Scroll down and find the Label section on the pop-up right panel. From here, you can:

  • Enter the text you want to show on the label.
  • Adjust the Label position to be Above or Aside the main menu text.
  • Change the text & label color.
  • Add an icon:
    • Choose from the drop-down list
    • Find an icon from Eurus’s icon library, copy and enter its name into Use another icon.
    • enter the custom icon SVG code.

Leave everything blank to remove the label.

📌 To change the image banner height:

  • Scroll down to the Image height, and choose the height you want for your menu banner.
  • Tick the box that says “Make banner full width” to expand the banner(s) width.

📌 To adjust the banner image’s width and spacing:

You can customize the number of columns to determine how many images are shown on a row for this banner menu: 

STEP 1: Open the settings 

At the Banner menu settings panel, scroll down to Banner layout

STEP 2: Set up the banner image width

Choose the Number of columns (from 1 to 5), which defines the width of banner images:

Number of columns

Banner width

Example

1

100% (full width)

4

25%

STEP 3: Set up the spacing between banner images

At Column spacing, set the distance between banner image columns.

STEP 4: Set up content display

If you want to display heading, subheading, text,... directly on the banner image, toggle “Enable content overlay”

STEP 5: Click “Save” when done.