Features Breakdown: Bubble Navigation Menu This section creates a visual navigation bar, perfect for showcasing collections or categories (e.g., "New In," "Sale," "Shoes"). It features a highly customizable "Double Frame" design (Border + Inner Ring) and offers complete independence between Mobile and Desktop layouts.

1. Shape & Border Styling

• Shape Control: Toggle between classic Circular Bubbles or Square Cards. If Square is selected, you can adjust the Corner Radius (0px to 100px).

• Advanced Framing: Creates a "Double Layer" effect:

  • Outer Border: Set the Thickness (px) and choose a Solid Color or a Gradient.

  • Inner Ring: A customizable gap between the image and the border. You can set the Gap Size (px) and the Ring Color (usually matching the background) to create a "floating image" look.

2. Responsive Dimensions

• Independent Sizing: Distinct sliders to set the Bubble Diameter/Size for Desktop vs. Mobile.

• Spacing Control: Adjust the Gap between bubbles separately for Mobile and Desktop.

• Layout Strategy:

  • Desktop: Usually wrapped or centered.

  • Mobile: Horizontal scroll (swipeable).

• Alignment: Checkboxes to Center items on Desktop or Mobile independently. Includes a "Left Offset" slider for precise positioning.

3. Text & Typography

• Font Source: Use the global Theme Font or force a specific Custom Font for the entire section.

• Headings: Dedicated fields for a Section Title and Subheading with adjustable alignment (Left/Center/Right) and colors.

• Bubble Labels:

  • Sizing: Adjust font size and line height.

  • Layout: Toggle Multiline Text (allow wrapping) or force single-line text (which adds "..." if the text is too long).

  • Spacing: Adjustable margin between the bubble image and the text.

4. Wrapper & Layout

• Container Width: Choose different wrapper strategies for Mobile and Desktop:

  • Standard: Use the Theme's default Page Width or Container.

  • Custom: Define a specific Max-Width (px) and Side Padding (px) to control exactly how the menu sits on the screen.

• Section Spacing: Adjustable Top and Bottom padding.

5. Block Content

• Capacity: Supports up to 20 individual blocks.

• Block Settings: Each block contains an Image/Icon picker, a Label, and a clickable URL.

• Interaction: Optional Zoom on Hover effect to encourage clicks.