The navigation menu element adds a navigation menu to the top of your page. It's useful for linking to different sections of the page or to other pages in your store. When you add the element, editing options appear in the settings panel on the right. This article walks through each setting so you can configure it properly.

Let's start by adding the element.

General Settings

Element Name

In the General Settings section, you'll find the default name of the element. You can keep it as is or rename it to something more descriptive. Renaming is recommended, as it makes the element easier to identify when reviewing your list later.

The Menu Items feature lets you include navigational options such as Home, About, Team, and Contact Menus on your website's navigation bar. You can add more options by clicking the "+ Add Item" button.

Line Height

The Line Height feature lets you increase the vertical spacing between text lines by adjusting the size bar or typing a number in the field. This helps improve the readability and appearance of your content.

Text Transform

The Text Transform feature lets you change your text to Uppercase, Lowercase, or capitalise each word, giving you control over the visual style and readability.

Letter Spacing

The Letter Spacing feature lets you adjust the space between each letter in your text.

Text Align

The Text Align feature lets you position your text to the left, centre, right, or justified.

Font Weight

The Font Weight feature lets you adjust the thickness of your text for both Desktop and Mobile views.

Typography Type

The Typography Type dropdown lets you choose a font for your navigation bar. You can use the headline or content font you've set up in settings, or select a custom font from an additional dropdown.

Mobile View Icon

Add an icon to your page by selecting from the available options. If you have a specific icon in mind, type it into the search bar to narrow down the results.

Add a dropdown icon to your menu by selecting from the available options in the style editor. The icon indicates when an item can expand, and includes a smooth rotation animation.

Font Size

Adjust the font size for both mobile and desktop by dragging the size bars. You can preview the mobile font size by toggling the mobile view in the top menu bar of the builder.

Show Cart Icon

Enable Show Cart Icon to display the shopping cart in the navigation menu, giving visitors a clear view of the number of items in their cart before checkout.

Enable Show Searchbar to display a search bar within the navigation menu, so visitors can easily find products.

Spacing Option

The Spacing Option feature gives you control over the spacing of content in your menu and sub-menus.

  • Padding Left, Right, Top, and Bottom: The Padding Left, Right, Top, and Bottom options include four toggle bars that let you move your content in any direction. Drag the toggle bar to increase or decrease the spacing.
  • Margin Top and Bottom: The Margin Top and Bottom toggle bars let you adjust the top or bottom margin of your content. Drag the bar to increase or decrease the margin size, adding negative space above or below the element.
  1. Menu Item Alignment: This feature lets you control the layout of items to keep your navigation menu looking good and working well.
  2. Menu Item Spacing: Adjust the spacing of your menu items by moving the bar or entering a number in the box.
  3. Business Name: Toggle on this feature to add a business name to the menu.
  4. Menu Item Direction: Menu Item Direction lets you display your navigation bar in the default or reverse order.

Color Options

The Color Options feature lets you adjust text and icon colours to suit your preferences.

  • Background Color: Lets you change the background colour of your navigation bar or section for desktop view. Select a colour from the palette.
  • Mobile Background Color: Customises the background colour of your navigation menu in mobile view, keeping your design consistent across devices.
  • Popup Background Color: Adjust the background colour of any popups linked to your navigation menu, such as dropdown menus.
  • Mobile Popup Background Color: Set the background colour for popups displayed in mobile view, improving readability and style.
  • Color: Controls the text colour in its default (non-bold, non-italicised) form. Select any shade to match your branding.
  • Hover Background Color: Change the background colour for the hover state here. This applies to desktop view only.
  • Hover Text Color: Change the colour of your hover text here.
  • Bold Text Color: Change the colour of bold text here. To make text bold, highlight it and click the "B" icon.
  • Italic Text Color: Edit the colour of italic text here. To italicise text, highlight it and click the "I" icon.
  • Underline Text Color: Edit the colour of underlined text here. To underline text, highlight it and click the "U" icon.
  • Icon Color: Edit the icon colour here. Only the icon colour changes, regardless of where it's placed.
  • Cart Icon Color: Defines the default colour of the cart icon in the navigation menu. This colour shows when the icon is unselected.
  • Cart Icon Active Color: Specifies the colour of the cart icon when selected, providing a visual cue for user interaction.

Brand Logo Config

  • Toggle on the "Logo in Menu" button to place your brand logo in the left corner of your navigation menu, making it easy for visitors to navigate your website. Additional editing options appear when you toggle this on.
  • Brand Logo: Add your brand logo by clicking the image icon on the right side of the designated space. This opens the import page where you can upload your logo. Click the clipboard icon in the upper right corner to copy the image URL, then exit the import page and paste the URL into the Brand logo field.
  • Optimize Image load: Make sure your logo image is optimised for fast loading by compressing it before uploading. This helps keep page speed up and improves the user experience.
  • Width and Height: Adjust the width and height of your brand logo to fit your menu. You may need to try a few different combinations to get the right fit.
  • Alt Text (for SEO): Use the Alt Text field to add SEO keywords relevant to your brand. This helps your site appear in relevant search results.

Image Actions

In the Actions feature, you can choose from a range of options.

  • Open pop-up: Displays a pop-up when the image is clicked. You can customise the pop-up content and design to suit your needs.
  • Go to Website URL: Select this option to direct visitors to a specific page on your website.
  • Hide & Show Elements: Use this action to toggle the visibility of specific elements on the page. You can set the image to hide or reveal selected elements when clicked.
  • Scroll to Element: Creates a smooth scrolling effect that takes visitors to a specific section of the page when the image is clicked.
  • Step: Use this action to move to a specific step in your store when the image is clicked. This is particularly useful for multi-step stores.
  • Next Step: Automatically moves visitors to the next step in your store when the image is clicked.
  • Call: Set the image to initiate a phone call to a pre-defined number when clicked. Useful for encouraging direct contact.
  • SMS: Use this action to compose and send a text message to a pre-specified number when the image is clicked.
  • Email address: Configure the image to open the visitor's default email client with a pre-filled recipient address, subject, or body, making it easy for them to get in touch.

Customer Login

Enable Customer Login to allow visitors to log in directly from the storefront to view order history and account-specific content without being redirected. This secure login adds professionalism, builds user trust, and supports repeat purchases through an integrated dropdown menu and customisable navigation options.

Advanced Settings

Advanced Settings gives you further customisation options.

The Borders & Corner feature lets you select a border style for your content. Choose from the available options and set the thickness, colour, and radius.

Shadow

Adds a shadow behind the element, creating depth and helping the navigation menu stand out against the background.

Visibility

Choose whether your edits are visible on mobile, desktop, or both by clicking the relevant icon. This gives you greater control over how your content appears across devices.

Custom Class

The Custom Class feature lets you add a specific class to your content. Press Enter or space to add a class.

CSS Selector

Once your navigation bar is set up, you can copy the Custom CSS to use elsewhere. Click the copy icon to the right of the reference code.

---

The Navigation Menu Element gives you everything you need to create a clear, user-friendly navigation experience. With a wide range of customisation options, you have full control over how your menu looks and works, making it easy to keep things on-brand and engaging for visitors.