Navigation Bar Overview

The navigation bar element enhances your page by adding a menu at the top. This is particularly useful for directing users to various sections on the same page or to other pages in your funnel. When you insert a navigation menu, a set of customization options will appear on the left-hand side.

General Configuration

Element Name/Title: Within the General Settings, you'll see the current name of the element you're modifying. You can retain the default title or rename it to something more specific. Renaming is suggested as it helps you identify the element easily later when reviewing your funnel components.

Spacing Customization

Padding Adjustments: The Padding feature offers sliders to adjust the content's positioning on the left, right, top, and bottom. Dragging these sliders allows you to fine-tune the space around your element.

Margin Adjustments: Similar to padding, the Margin settings let you alter the spacing above or below your content. This is done by dragging the sliders to achieve the desired amount of negative space.

Customization Options

Background Color: You can personalize the background color of the navigation menu by selecting from the available color palette. This feature allows for desktop-specific adjustments.

Mobile Background Color: This option lets you select a different background color for mobile users, enhancing both visibility and user experience.

Text Alignment: Text in the menu can be aligned to the left, right, or center using this feature, ensuring the layout meets your visual needs.

Menu Items: You can easily add essential links like Home, About, or Contact to your menu by using the "Menu Items" feature. New items can be added by selecting the "+ Add Item" button.

Typography & Font Size

Font Sizing: Font size adjustments for both mobile and desktop views are made by dragging size bars. Ensure your text displays properly across different devices by using the preview mode in the editor.

Typography Type: You can select from preset or custom fonts for your navigation bar text, with options for both headline and content fonts.

Icons & Colors

Mobile View Icon: This feature allows you to include an icon in your navigation for mobile users. A search bar is available to help you find the exact icon you want.

Color Options: Customize text, icons, and background colors with different settings for regular and bold text, italics, and hover states.

Menu Item Spacing: You can adjust both horizontal and vertical spacing between menu items by manipulating sliders or inputting precise numbers.

Brand Logo Settings: Enable the "Logo in Menu" option to display your brand logo on the navigation menu. Adjust the width and height for an ideal fit, and add SEO-friendly Alt Text.

Actions & Advanced Settings

Actions: You can assign actions like "Open the popup" or "Go to website URL" when users interact with menu elements.

Line Height: This feature adjusts the space between lines of text, improving readability.

Visibility & CSS Options: Control whether certain edits appear on mobile, desktop, or both by adjusting the visibility settings.

CSS Selector: You can copy the Custom CSS code for use in other areas by clicking the copy icon.