The navigation menu element adds a navigation menu to the top of your funnel page. This is useful for linking to different sections of the page or to other pages in your funnel. When you add the navigation menu element, you will have editing options on the left-hand side.

General Settings

Element Name

In the General Settings section, you will find the default name of the Edit option you are currently working on. You can keep it as is or rename it to something more descriptive. Renaming the element is highly recommended, as it will help you identify it easily later when you review your funnel elements list.

The Menu Items feature lets you include essential 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

With the Line Height feature, you can increase the vertical spacing between text lines by adjusting the size bar or typing a number into the designated field. This helps improve the readability and aesthetics of your content.

Text Transform

The Text Transform feature lets you change the text format to Uppercase, Lowercase, or capitalise each word, giving you control over the text style for improved visual appeal 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 adjust the positioning of your text. You can position it to the left, centre, right, or justified.

Font Weight

For both Desktop and Mobile Views, you can adjust the thickness of your text using the Font Weight feature.

Typography Type

The Typography Type dropdown gives you font options for your navigation bar. You can use the headline or content font set up in settings, or choose a custom font. With the custom font option, you can then select from a variety of fonts using an additional dropdown.

Mobile View Icon

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

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

Font Size

Adjust the font size of text or content for both mobile and desktop devices by dragging the size bars. This lets you customise the visual appearance of your content for the best user experience. You can preview the mobile font size by toggling the mobile view in the top menu bar of the builder.

Spacing Option

The Spacing Option feature offers a variety of spacing options for your content. Keep in mind that the settings will only apply to the Edit option you are currently working on.

Padding Left, Right, Top, and Bottom: The Padding Left, Right, Top, and Bottom options include four toggle bars that let you move your content to the left, right, top, or bottom. Drag the toggle bar to increase or decrease the spacing.

Margin Top and Bottom: By toggling the bars for Margin Top and Bottom, you can adjust the top or bottom margin of your content. Drag the toggle bar to increase or decrease the size of your margin. This adds negative space to the top or bottom of your element, depending on which margin you toggle.

  1. Menu Item Alignment: This feature helps you control the overall layout and spacing of items to ensure your navigation menu is both visually appealing and functional.
  2. Menu Item Spacing: In the Menu Item Spacing Options, you can adjust the spacing of your menu items. Simply move the bar to increase the number until you achieve the desired spacing. You can also type a number directly into the box.
  3. Business Name: Toggle on this feature to add a business name to the menu. However, toggling this won't register your business with legal authorities.

Menu Item Direction lets you choose between displaying your navigation bar in the default or reversed order.

Background Color

To change the background colour of your navigation menu, click the colour option of your choice. This lets you customise the look and feel of your menu for desktop devices.

Mobile Background Color

To modify the mobile background colour of your navigation menu, click the desired colour option. This lets you customise the appearance of your menu for mobile devices, improving readability and user experience.

You can also see the colour change when you open the Hamburger Menu in the desktop view.

Color Options

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

  • Background Color: Allows you to change the background colour of your navigation bar or section for desktop view. You can select a colour from the palette.
  • Mobile Background Color: Customises the background colour for your navigation menu in mobile view, ensuring a cohesive design 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: This lets you set the background colour for popups displayed in mobile view, improving readability and style.
  • Color: Controls the text colour when it is in its default (non-bold, non-italicised) form. You can select any shade to match your branding.
  • Hover Background Color: You can change the background colour of the Hover here. This works only on the Desktop view.
  • Hover Text Color: You can change the colour of your Hover here.
  • Bold Text Color: When a text is in bold form, you can change the colour here.
  • Italic Text Color: You can only edit an italic text colour here. To make text italic, highlight the text and click the Slant "I" icon.
  • Underline Text Color: You can only edit an underlined text colour here. To underline your text, highlight the text and click the underlined "U" icon.
  • Icon Color: If you have an icon added to this page, you can only edit the icon colour here. Only the icon colour will change regardless of the position it is placed.

Brand Logo Config

  • By toggling on the "Logo in Menu" button, you can place your brand logo in the left corner of your navigation menu, making it easier for visitors to access your website. When you toggle on the button, editing options become available.
  • Brand Logo: You can add your brand logo to the menu by clicking the image icon on the right side of the designated space. This takes you to the import page, where you can upload your logo image. Afterwards, click the clipboard icon at the upper right corner of the page to copy the image URL. Exit the import page and paste the URL into the Brand logo space provided.
  • Optimize Image load: Ensure your logo image is optimised for fast loading by compressing it to an appropriate size before uploading. This helps improve page speed and overall user experience.
  • Width and Height: In this Width and Height section, you can adjust the width and height of your brand logo to fit your menu. You may need to try different combinations of numbers to get the right fit.
  • Alt Text (for SEO): Use the Alt Text feature to input SEO keywords relevant to your brand in the navigation bar section. This helps your brand appear in relevant search queries on search engines.

Image Actions

In the Actions feature, you have a variety of options to choose from.

  • Open popup: This action displays a popup when the image is clicked. You can customise the popup content and design based on your requirements.
  • Go to Website URL: Selecting "Go to website URL" in the "Image Action" icon requires you to specify which website page you want to direct your visitors to.
  • 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 on interaction.
  • Scroll to Element: Selecting this action creates a smooth scrolling effect that directs 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 funnel when the image is clicked. This is particularly useful for multi-step funnels.
  • Next Step: This option automatically advances visitors to the next step in your funnel when the image is clicked.
  • Call: Set the image to initiate a phone call to a pre-defined number when clicked. This is ideal for encouraging direct communication with your audience.
  • 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 user's default email client with a pre-filled recipient email address, subject, or body content, making it easy for visitors to get in touch.

Advanced Settings

Under Advanced Settings, you will find additional customisation options.

The Border Options feature lets you select the type of border you want for your content. Once you choose a border type, settings for thickness, Color, Radius, and Style become available.

Shadow

This feature lets you add a shadow behind an element, creating a sense of depth and making the navigation menu stand out more prominently against the background.

Visibility

To determine where a particular edit option will be visible, select either mobile devices, desktops, or both by clicking the relevant icon. This gives you greater control over where your edits appear.

Custom Class

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

CSS Selector

Once you have finished setting up your navigation bar, you can copy the Custom CSS to use elsewhere. Simply click the copy icon to the right of the reference code.

By using the Navigation Menu Element, you can create a clean, user-friendly navigation experience for your visitors. With extensive customisation options, you have full control over your menu's appearance and functionality, ensuring it fits your brand and keeps users engaged.