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

In the General Settings section, you will find the default name/title of the Edit option you are currently working on. You have the option to keep it as is, or you can choose to rename it to something more descriptive. Renaming the element is highly recommended as it will provide you with an easy way of identifying the element later when you are reviewing your funnel elements list.

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

The Padding Left, Right, Top and Bottom option includes four toggle bars that allow you to move your content to the left, right, top, or bottom, depending on which toggle bar you click on. You can adjust the spacing by dragging the toggle bar to increase or decrease the space you want.

By toggling the bars available 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 will add negative space to the top or bottom of your element, depending on which margin you toggle.

To change the background colour of your navigation menu, simply click the colour option of your choice. This feature enables you to customise the appearance and feel of your menu for desktop devices.

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

Using the Text Align feature, you can adjust the positioning of your text to your liking. You have the option to position it to the left, centre, right or as justified.

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

Adjust the font size of a particular text/content for both mobile and desktop devices easily by dragging the size bars. This feature enables you to customise the visual appearance of your content for optimal user experience. You can preview the mobile font size to ensure it is formatted correctly by toggling mobile view in the top menu bar of the builder.

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

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

The Colour Options feature enables you to adjust various text and icon colours to suit your preferences.

Horizontal and Vertical Spacing

In the Menu Item Spacing Options, you can adjust the spacing of both the horizontal and vertical height of your menu items. To do this, simply move the bar to increase the number until you achieve the desired spacing. You can also input a desired number into the box to ensure your element is spaced accordingly.

By toggling on the "Logo in Menu" button, you can place your brand logo on the left corner of your navigation menu, enabling easier accessibility to your website. When you toggle on the button, editing options become available.

In the Actions feature, you have two options to select from. You can either "Open the popup" or "go-to website URL".

Upon selecting "Go to website URL" in the "Image Action" icon, you will be required to indicate which website page you want to direct your visitors to.

If you want to redirect visitors to a new tab when they perform an action, toggle on the "Open In New Tab" option. With this feature, visitors can quickly interact with your website without losing their progress.

Under Advanced Settings, you will have additional customisation options.

With the Line Height feature, you can increase the vertical spacing between text lines by either adjusting the size bar or typing a number in the designated field. This customisation allows for improved readability and aesthetics of your content.

Using the Text Transform feature, you can change the text format to Uppercase, Lowercase, or capitalise each word. This customisation allows you to modify the text style for enhanced visual appeal and readability.

To determine where a particular edit option will be visible, you can select either mobile devices, desktops, or both by clicking on the relevant icon. This feature lets you choose where your edits will be visible and enables greater control of your content.

The Custom Class feature allows you to input your specific class to your content.

Border

The Border Options feature enables you to select the type of border you want for your content. Once you choose any of the available border types, the settings for the border pop up, including Style, Width, Colour, and Radius.

Style

For the Style, there are three different options - Solid, Dashed, and Dotted, allowing you to customise the look of your border.

Width

When you increase the border width, it increases the thickness of the border.

Colour

To change the colour of the border, click on this colour icon. You can select a colour from the options given, or type a custom colour code into the given field.

Radius

Adjusting the radius of your border curves the edges, with a higher number producing a curvier result.

Radius Edge

You can decide which corner of the border to curve, including All Edges, Top Only, or Bottom Edge Only, according to your preferences.

The Dropdown Options feature enables you to customise the size and colour of your dropdown menu specifically for mobile view. By selecting the colour option, you can modify the colour of the dropdown menu by choosing a colour from the available options or adding a custom colour code to match your branding.

Once you’ve completed your navigation bar setup, you will have the option to copy the Custom CSS to use elsewhere. Simply click on the copy icon to the right of the reference code to copy the code.