Navigation Menus In The FG Funnels Funnel and Website Builder

In this article:

Adding & Configuring Navigation Menus In The FG Funnels Funnel and Website Builder

Add a Navigation Element to your page by clicking on the "Add Elements" button in the top left corner of the builder. You will find the Navigation Menu element under Elements > Navigation Menu and drag it into the desired row and column.


Customizing the Nav Menu

  • You can remove your business name or headline by toggling off under the Advanced tab.
  • Add a brand logo by selecting an image from media storage and adjusting width and height.
  • You can edit or delete default menu items under navigation menu in the right-hand panel.

Adding and Editing Menu Items

  • Click on "Add Item" under the other menu items to create a new menu item.
  • Specify the title and choose where the link should go. Go to website URL allows you to add any website URL where as Go To Page will allow you to select from a dropdown of pages in your current website.
  • Rearrange menu items by dragging them using the 6 dots icon to the left of the item name. This will allow you to drag them to the desired position.

Creating Dropdown Menu Items

  • You can drag an item directly underneath another and slightly to the right of the left edge in order to create dropdowns under other menu items.
  • To remove the dropdown and make it a top-level item, drag the item back to the left side.

Styling the Navigation Menu

  • You can customize background color, letter spacing, font size, weight, typography, and color using the options in the right hand panel under the General tab.
  • You can set the hover text color for links and hover background color for a different appearance.
  • Modify horizontal spacing between menu items for more or less space between the items.

Additional Customization Options

  • You can define an action when someone clicks on the logo, such as redirecting to a website URL.
  • From the advanced tab, you can also adjust dropdown settings for spacing and background color to enhance the menu's visual appeal.

Mobile Styling and Optimization for Navigation

Regular Navigation Menu Styling for Mobile

The regular navigation menu has a number of styling options for mobile devices. You can adjust the mobile background color and size, customize the mobile icon and icon color, adjust the vertical spacing, set mobile specific font sizes for the navigation menu all from your regular navigation menu.

  • You can use mobile settings for the regular navigation menu styling for consistent styles across devices.
  • Adjust mobile background color and font size.
  • Customize mobile icon and icon color.
  • Modify vertical spacing for items on mobile.

Creating a Mobile-Only Navigation

If you want a very different style on mobile, you can create a separate mobile only navigation menu.

  • Clone the existing navigation menu for mobile-only version.
  • Toggle off the mobile-only version on desktop and vice versa.
  • Make specific changes like using a different logo for the mobile version.
  • Adjust width, height, and other settings without impacting the desktop version.
  • Ensure changes to links are mirrored in both versions.

You can use anchor links to direct users to a specific section on a page. This is great for one page websites or an item you want in a nav bar but doesn't have a separate page.

  1. Setting Up Navigation Menu
    • Set up the navigation menu with the desired tabs.
  2. Identifying the Target Section
    • Identify the section on the page that you want the menu item to navigate to.
    • Click on the section to bring up the section panel.
    • Go to the Advanced Panel
    • Copy the CSS selector provided
  3. Return to Your Navigation menu
    • Edit the menu item that you want to link to the specific section.
    • Use the "go-to website URL" option.
  4. Inserting the CSS Selector
    • Delete what is already in the box and paste the CSS selector in the URL box if it's a one-page website and the section is on the same page that the navigation menu is on.
    • If the section is on a different page or the navigation menu will be used on multiple pages, include the full URL of the page, followed by an / and the section selector. followed by the section if the menu will be used on multiple pages.
  5. Finalizing the Link
    • Ensure the option to open in a new tab is unchecked.
    • Save and publish the changes.
  6. Testing the Anchor Link
    • Click on the menu item to test if it correctly navigates to the specified section on the page.