Navigation Menus in the SourCherry Funnel Builder allow you to create structured, responsive menus for websites and funnels. You can add links, dropdowns, nested items, and customize layout behavior. Recent improvements include a new wrap option for menu items and enhanced submenu styling for smoother user experience across desktop and mobile.
TABLE OF CONTENTS
What Is a Navigation Menu?
A Navigation Menu is an interactive element that allows visitors to move between pages or sections within your funnel or website. It supports:
Direct page links
External URLs
Dropdown menus
Nested submenus
Anchor-based scrolling
Responsive behavior for mobile
Navigation menus are commonly placed in headers and footers.
How to Add a Navigation Menu
Open your Funnel or Website in the Builder.
Click Add Element.
Select Navigation Menu.
Drag the element into your desired section.
Click the element to configure its settings.
Configuring Menu Items
Within the Navigation Menu settings panel, you can:
Add new menu items
Rename menu labels
Link to internal pages
Link to external URLs
Add dropdown (child) items
Reorder menu items
To create a dropdown:
Add a parent menu item.
Click Add Sub Item under that item.
Configure the child link.
Repeat for additional nested items.
Wrap Option (New Enhancement)
A new Wrap option is now available for Navigation Menu elements.
When enabled, the Wrap option allows menu items to automatically move to the next line if there isnât enough horizontal space. This prevents layout breaking and improves responsiveness across different screen sizes.
Why It Matters
Prevents menu overflow
Improves responsiveness on smaller screens
Maintains clean header alignment
Reduces layout distortion
This is especially useful for:
Menus with many items
Long menu labels
Tablet and mid-sized screens
Submenu Styling Improvements
Submenu behavior has been enhanced for improved visual consistency and usability.
Improvements include:
More stable dropdown rendering
Cleaner hover behavior
Improved spacing and alignment
More consistent submenu styling across devices
These updates eliminate visual inconsistencies and improve interaction flow.
Mobile Behavior
Navigation Menus automatically adapt to mobile view. Depending on your configuration, menus may collapse into a hamburger-style layout.
Recent improvements also ensure:
Better touch responsiveness
Improved dropdown interaction on mobile
More consistent animation transitions
Styling Options
You can customize:
Font style
Font size
Menu alignment (left, center, right)
Spacing between items
Background color
Hover effects
Dropdown appearance
Use the Style tab in the element settings panel to configure these options.
Using Scroll-to-Element with Navigation Menus
Navigation Menu items can be configured to scroll to specific sections on the page.
With recent updates, scroll behavior now uses smooth scrolling instead of abrupt jumps. This creates a more natural transition when navigating within a page.
Best Practices
Keep menu labels concise
Use dropdowns to organize complex navigation
Enable Wrap when using multiple menu items
Test mobile view before publishing
Avoid excessive nested submenu levels
Frequently Asked Questions
Q: What does the Wrap option do?
The Wrap option allows navigation items to move onto a new line if they exceed the available width, preventing layout overflow.
Q: Do submenu improvements require any settings change?
No. Styling and behavior improvements apply automatically.
Q: Is smooth scrolling enabled by default?
Yes. Scroll-to-element actions now use smooth scrolling automatically.
Q: Does this affect published funnels or websites?
Existing menus benefit from styling and smooth scroll improvements automatically. The Wrap option must be manually enabled if desired.
Q: Does this change manual styling settings?
No. Existing style configurations remain intact.