Navigation: Add Navigation Menus to Pages

The hamburger Icon is a collapsible menu button. It provides an intuitive and compact way for users to access the navigation menu. Visitors can open or close the menu by clicking or tapping the Hamburger Icon, ensuring a clean and modern design.

Note:

If the Collapse option is set to Never, the Hamburger Icon will not appear, and the navigation menus will always remain fully visible. To enable the Hamburger Menu, set the Collapse option to either:

• Mobile: The navigation element will collapse into a Hamburger Menu when the screen size is 770px or below.

• Always: The navigation element will collapse into a Hamburger Menu on all screen sizes.

For further details, refer to the Navigation Settings section in this article.

1. Dimensions

• Width and Height
  Control the size of the icon. Adjust these sliders or input values manually in pixels (px) to scale the Hamburger Icon.

  • Larger dimensions result in a more prominent icon.

  • Smaller dimensions create a more subtle, minimalistic look.

2. Bar Style and Size

• Bar Style: Choose between different bar designs to customize the icon's appearance. Options include three-line stacks or variations to suit your design preferences.

• Bar Size: Adjust the thickness of each line (bar) within the Hamburger Icon. Increase the size for bold icons or decrease it for a sleeker style.

3. Colors

• Bar Color: Change the color of the bars in the Hamburger Icon to match your branding. For example, use a white bar color for dark backgrounds or a black bar for light.

• Background: Set the background color of the icon container. A transparent background often works best for clean, modern designs.

4. Bar Border Radius

Smooth the edges of the bars by increasing the Bar Border Radius. Higher values create rounded bars, giving a softer, less angular appearance.

5. Justification

Align the Hamburger Icon within the navigation container. Options include Left, Center, and Right.

6. Padding

Adjust the space inside the Hamburger Icon’s container:

• Top and Bottom: Modify the vertical spacing.

• Left + Right: Alter the horizontal spacing.

7. Shadow

Add depth to the icon by enabling the shadow effect. Customize the intensity and offset to create a 3D look.

8. Border

Apply a border around the Hamburger Icon’s container for added definition. You can adjust the width, color, and style of the border.

9. Corner Radius

Round the corners of the Hamburger Icon’s container. Higher values result in more curved edges, which are ideal for softer design aesthetics.

The Overlay is a feature that enhances the navigation experience by creating a full-screen overlay when the Hamburger Icon is clicked. This ensures a modern, distraction-free way to display the navigation menu items while dimming or blocking the background content.

Navigation Links

The Navigation Links displayed in the Overlay are the same links configured in the Navigation element. These links can include menu items, submenus, blog submenus, or images. For detailed instructions on adding or managing links, refer to the Navigation Links section of this guide.

Additional Overlay Settings

1. Top Margin:

Adjusts the space above the overlay container, allowing you to control how much distance you want from the top of the screen. The slider lets you set the exact pixel value or percentage value for the margin.

2. Justification

This option determines the alignment of the menu items within the overlay:

• Left: Align the menu items to the left of the overlay.

• Center: Center-align the menu items within the overlay.

• Right: Align the menu items to the right of the overlay

3. Gap

The Gap slider allows you to adjust the vertical spacing between the menu items. Increase the gap for a more spaced-out appearance or reduce it for a compact layout.

4. Background

The Background settings allow you to define the visual appearance of the overlay, enhancing your branding or creating a more engaging user experience. Below are the customization options available:

• Image URL: Enter the background image URL or upload one directly in the ClickFunnels image gallery.

• Image Style: Choose how the image is displayed within the overlay, such as filling the width, height, or the entire area. Additional options like repeating or centering the image are also available.

• Image Fit: Adjust the alignment of the background image to position it effectively within the overlay.

• Color: Set a solid background color for the overlay and customize the transparency of both the background and the foreground to achieve the desired effect.

• Image Fit: Align the image (e.g., center, top-left) within the overlay.

• Color: Use a solid background color and adjust its transparency for subtle effects. You can also configure the Foreground transparency.

5. Close Icon

The Close Icon allows visitors to dismiss the overlay and return to the main content:

• Color: Customize the color to contrast with the overlay background.

• Size: Adjust the icon’s size to make it easily noticeable.

6. Typography

Control the text styling for the navigation links within the overlay:

• Font Family and Weight: Choose a font and adjust its boldness.

• Font Size and Line Height: Configure text size and spacing for desktop and mobile views.

• Text Casing and Decoration: Apply text transformations like uppercase or underline effects.

• Link Styling: Set colors for links in default, hover, and active states.

7. Text Shadow

Add depth or emphasis to the navigation text with shadow effects:

• Offset (X and Y): Adjust the position of the shadow.

• Blur: Soften or sharpen the shadow edges.

• Color: Customize the shadow color to match or contrast with the text.

The Navigation Links section allows you to add and organize the menu items that appear in your navigation bar. These links can include regular menus, submenus, dynamic blog submenus, or even image-based menus. Below are the steps for adding and customizing these components.

Adding a Menu

To add a menu item:

• Click the + Menu button to create a new menu item.

• Click on the menu item to customize the text and its action. For example, you can add links to pages or external links or custom actions such as opening popups.

• When a menu is added, it is classified as an Item in the navigation element.
  

Adding a Menu with Submenus

Submenus allows you to create nested menu structures, making your navigation organized and user-friendly.

• Click the + Submenu button to add a menu item that contains a submenus.

• Submenus can hold regular menus or other submenus, creating a hierarchical structure.

• To add a menu directly to a submenu, click the + icon adjacent to the submenu. This adds a new menu item as a child under that submenu.

• When the submenu is clicked or hovered, the submenu items will appear in a dropdown container.
  

Previewing Submenus in Page Editor:

Each submenu includes a toggle switch that allows you to preview the dropdown container directly in the editor. Toggle it on to see how the submenu will appear when expanded.

Adding a Blog Submenu

The Blog Submenu is dynamic, automatically pulling blog categories and associated posts into the navigation:

• Click the + Blog Submenu button to add it to your navigation.

• Use the toggle switch for the Blog Submenu to preview how the dropdown will look in the editor.

• This is ideal for dynamically displaying categories and blog posts without manual updates.
  

Adding an Image as a Menu

Images can be used as clickable menu items alongside text-based menus. For example, you can upload an image of a button, such as a Contact Us icon, making it part of your navigation.
To add an image as a menu item:

• Click the + Image button to upload your image.

• Set the image menu's desired action (e.g., link to a page or trigger an action). Menu Action Settings

  Each menu item in the Navigation Links section can have specific actions assigned to it. When you click on a menu title, a settings window opens, allowing you to define what happens when users interact with that menu item. Here's how to configure the actions:
  

  1. Link Name: Enter the name of the menu item as it will appear in the navigation bar (e.g., Home, Shop, Contact Us).

  2. Link To: The setting lets you specify what happens when a user clicks the link. You can choose from several predefined actions

     • Go to another page: Link to a specific page within your funnel.

     • Custom URL: Redirect to an external website by adding a URL.

     • Custom Actions: Assign actions such as opening a popup, closing a popup, scrolling to a section on the page, or other custom interactions.

       • #open-popup: Clicking the link will trigger the page popup to open.

       • #submit-form: This option submits an opt-in form when clicking the link.

       • ?next_funnel_step=true: Clicking the link will redirect users to the next page in your funnel.

       • #close-popup: This action will close an already opened popup, functioning as the opposite of the open popup action.

       • ?page_action=mark_complete: If you're using the link in a course lesson editor, selecting this action will mark the lesson as completed when clicked.

  3. Open in New Window: Enable this option to open the link in a new browser tab when clicked. This is particularly useful for external links.

  4. Icon Picker: Add an icon to your menu item for visual emphasis. Toggle the Icon option and select an icon using the built-in Icon Picker.

  5. Open Full Settings: To customize your menu further, click Open Full Settings to access additional options such as menu styling, alignment, and spacing.

  Special Case: Blog Submenus

  No manual action configuration is required for the blog submenus. This dynamic menu automatically displays your blog categories and posts. The menu is linked to the dynamic path {{ blog.url }}. Once the blog sub-menu is added, it will automatically update based on the blog setup in your workspace. You can go to the Site app » Blog to manage your blogs.

Accessing Full Settings for Menu Items

The Full Settings option for menu items allows you to configure advanced features and style each item individually. This section breaks down the available customization options into the following categories:

1. Link

   • Link Name: Set the menu item's name as it will appear in the navigation bar.

   • Link Action or URL: Assign an action, such as linking to another page, a custom URL.

   • Target: Choose whether the link opens in the same window or a new tab.

2. Color

   • Text Color: Customize the menu text color to align with your branding.

   • Background Color: Set a background color to make specific menu items stand out (found under the Background section).

3. Typography

   • Font Style and Size: Choose from predefined styles (S, M, L, XL) or set custom sizes for desktop and mobile views.

   • Font Family and Weight: Select a font type and adjust its weight (e.g., regular, bold).

   • Letter Spacing and Line Height: Fine-tune spacing between characters and lines for readability.

   • Text Casing: Apply uppercase, lowercase, or capitalize styles.

   • Decorations: Add underlines, strikethroughs, or other text effects for emphasis.

4. Background

   • Background Color: Add a solid background color to emphasize certain menu items, such as a call-to-action.

5. Text Shadow

   • Enable the shadow effect to add depth to the text. Adjust parameters like direction (offset X and Y) and blur for softening edges.

6. Icon Before and After

   • Add icons before or after the menu text for better visual appeal or to communicate the purpose of the link.

   • Use the Icon Picker to choose from various icons that align with your design.

The Navigation Settings allows you to configure the navigation menu's layout, behavior, and alignment. These settings determine how the navigation bar appears and interacts with users across different devices. Below is a breakdown of the key features within the Navigation Settings.

1. Allow Items to Wrap to Multiple Lines: Toggle this option to allow navigation items to wrap onto a second line if they don’t fit in a single row. This is useful for menus with many items, especially on smaller screens.
   

2. Orientation: Horizontal displays navigation items in a single row and is ideal for desktop layouts. Vertical stacks navigation items in a column, typically used for mobile layouts or side menus.

3. Gap: Use the Gap slider to adjust the spacing between navigation items. Larger values create more separation between items, while smaller values condense the menu layout.

4. Collapse: This setting determines when the navigation collapses into a Hamburger Menu.

   • Never means the navigation remains fully visible and does not collapse on bigger and smaller screens.

   • Mobile collapses the navigation into a Hamburger Menu when the screen width is 770px or smaller.

   • Always collapses the navigation into a Hamburger Menu on all screen sizes.

     Note:

     To enable the Hamburger Icon, the collapse option must be set to Mobile or Always.

5. Justification
   Align the navigation items within the container. Left aligns items to the left. The center aligns items to the center within the navigation container. Right aligns items to the right.

The Size and Position settings allows you to adjust the dimensions and spacing of the navigation element to fit seamlessly into your page layout. These settings provide precise control over the navigation bar's size, alignment, and padding.

1. Width: Adjust the width of the navigation element using the slider or by entering a specific value. The width can be set in percentages (%) or pixels (px) to match your design requirements. For example, 100% will make the navigation span the entire width of the container.

2. Padding Top: Set the space above the navigation content by adjusting the Padding Top. Increase or decrease the value in pixels to control the vertical spacing.

3. Padding Bottom: Set the space below the navigation content by adjusting the Padding Bottom. This helps to create balance and alignment with other elements on the page.

4. Padding Sides: Control the horizontal padding on the left and right sides of the navigation element. This setting allows you to position the navigation content neatly within its container, preventing it from touching the edges.

The Submenu Settings component allows you to configure the spacing, alignment, and size of submenus within your navigation element. These settings help create a visually organized and user-friendly dropdown structure.

1. Submenu Gap: Adjust the spacing between individual submenu items using the slider or by entering a value in em. Increasing the gap creates more separation between items for better readability.

2. Submenu Justification: Align the submenu items in the container. Depending on your design preference, you can choose to have them left-aligned, center-aligned, or right-aligned.

3. Submenu Size: Use the slider to set the width of the submenu container. The default setting is auto, which automatically adjusts the width based on the content. Alternatively, you can specify a custom width.

The Submenu Padding component allows you to define the internal spacing around the submenu container, ensuring consistent alignment and spacing within the dropdown.

1. Top: Adjust the space above the submenu content by entering a value in pixels (px) or using the slider.

2. Bottom: Adjust the space below the submenu content to maintain balance and alignment within the dropdown.

3. Left + Right: Control the horizontal padding on the left and right sides of the submenu content, ensuring a neatly spaced appearance.

The Submenu Colors component allows you to customize the appearance of dropdown menus by setting the background and text colors. These settings ensure that your submenu matches your branding and enhances visibility.

1. Bg Color: Set the background color of the submenu. Use solid colors or transparency to align with your overall design.

2. Text Color: Customize the color of the text within the submenu. Choose a color that contrasts with the background for optimal readability.

The Submenu Shadow component lets you add a shadow effect to the submenu, enhancing its visual depth and distinguishing it from the background.

1. Shadow Style: Choose the type of shadow effect, such as Outset or other available styles.

2. X-direction and Y-direction: Adjust the horizontal and vertical positioning of the shadow in pixels.

3. Blur: Control the softness of the shadow edges. Higher values create a more diffused shadow.

4. Spread: Define the extent to which the shadow spreads outward from the submenu.

5. Color: Select a shadow color that complements the submenu’s design.

The Submenu Border component enables you to add and style borders around the submenu for better definition.

1. Borders: Enable or disable borders on specific edges (top, bottom, left, right) or apply them to all sides.

2. Border Style: Choose from solid, dashed, or other border styles.

3. Color: Set the border color to match or contrast with the submenu background.

4. Stroke Size: Adjust the thickness of the border in pixels.

The Submenu Corner component allows you to customize the corner radius of the submenu for a modern and polished look.

1. All Corners: Adjust the corner radius for all edges simultaneously to create rounded or sharp corners.

2. Separate Edges: Enable this option to control each corner individually.

   • Top Left: Adjust the radius for the top-left corner.

   • Top Right: Adjust the radius for the top-right corner.

   • Bottom Left: Adjust the radius for the bottom-left corner.

   • Bottom Right: Adjust the radius for the bottom-right corner.