SR Mega Menu 01

SR Mega Menu 01 is a perfect module for pages that need a bit more navigation!

Module Overview - SR Mega Menu 01

This module features a combination of Logos, Menus, CTAs, and optional Top bar. Supports up to 3 levels of navigation. 

SR Mega Menu 01 is a Global module ideally used for creating navigational links to pages, content and other resources on your website. Learn more about Global modules here.



Module Settings Walkthrough

Design Settings

You can edit the following items within the design settings section:

• Layout: Container or Full-width
• Mega Menu Layout: Conatiner or Full-Width
• Font Style with the option to select custom font.
• Nav Font Color Defaultav Font Color on Scroll
• Mega Menu Color
• Background



Module Settings

For SR Mega Menu 01, most settings are focused on the Logo(s), Menu, CTAs, and optional Top Bar

Setting the Logo(s)

You have the option to select three logos each one for the following function:

• Logo Default, to display on desktop devices
• Logo on scroll, used if you used a transparent navigation. (Otherwise keep the same as Logo)
• Mobile Menu Logo, to display on mobile deives after clicking the hamburger toggle.

All three logos allow you to:

• You can have the option to display and change the Logo at the left portion of this module.
• You can apply the following settings to the logo image:
  • Size: Automatically adjust, Exact width and height.
  • Image Loading: Browser default, Lazy, Eager
• You can also set the link attributes on the logo with the following settings:
  • Link to:
    • External: URL to link of website
    • Content: Select a page
    • File: Browse files
    • Email address: Link to email address
    • Blog: Select a blog
  • Open link in new window:
    • On/ Off
  • Link type:
    • Follow/ No follow



Adding a Menu

• In SR Mega Menu 01, there is the option to select a menu or create a new menu.
• You can also set the alignment of the menu: Left/ Right.



Editing the CTA

You can add as many CTA buttons as you want.

You can edit the following:

CTA Type: Hubspot CTA, button, or modal. in most instances, we use button.

CTA Style: Primary, Secondary, Tertiary, White, Black, Dark, Light, Success, Info, Warning, Danger, Outline Primary, Outline Secondary, Outline Tertiary, Outline White, Outline Black, Outline Dark, Outline Light, Outline Success, Outline Info, Outline Warning, Outline Danger, Custom, None.

CTA Size: Small, Default, Large

Add Icon Option: Position: Left or Right



Extra Module Behaviour Settings

• You can the option to toggle the following settings to adjust the behaviour of the SR Mega Menu 01 module to your design:
  • Fixed: This behaviour option sets the module to stick to the very top of the page. It will also automatically hide the Nav when the user scrolls down the page and slide back in when scolling up
  • Transparent: This option enables the module to have a transparent background.
  • Enable Search: This provides a toggle which opens a search bar on the module.
  • Enable Top Bar

Adding and editing the Top Bar

• After enabling the Top Bar toggle you have the ability to add more navigation to the SR Mega Menu 01 module.
• You can edit the following:
  • Left Menu: You have the option to select a menu from you list of navigation or create a new menu to be on the left side of the Top Bar container.
  • Right Menu: You have the option to select a menu from you list of navigation or create a new menu to be on the right side of the Top Bar container.
  • Top Bar Text: You can type in text that will sit in the center of the Top Bar container.
  • Font Color
  • Background Color
  • Show Close Button: You have the option to have a close button on the topbar, so visitors can close the bar if they want to.



How to Use SR Mega Menu 01 - Live Examples

1. Lean Labs Home Page- You can see the module used live
2. High Fidelity Home Page- You can see the module used live
3. Stage Ten Home Page- you can see the module used live