SR Nav Dropdown 01

SR Nav Dropdown 01 is a perfect module for Global Navigation on your pages

Module Overview - SR Nav Dropdown 01

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

SR Nav Dropdown 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: page or full-width
• Font Style with the option to select custom font.
• Font Color
• Font Color Alternative, is the font color on scroll down for transparent navigation and the mobile menu.
• Link Hover Color
• Background



Module Settings

For SR Nav Dropdown 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, 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 devices 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 Nav Dropdown 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 Nav Dropdown 01 module to your design:
  • Sticky: This behaviour option sets the module to stick to the very top of the page.
    • Hide on Scroll (The nav will slide out of view when scrolling down and slides back in when scrolling 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 Nav Dropdown 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 Nav Dropdown 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