website logo
Login
⌘K
Sprocket Rocket Help Center
First Steps
Setup
HubSpot Permissions
Installing Sprocket Rocket
Adding a Custom Installation
Page Builder
Creating a Page
Saving a Layout
Using Custom Modules
Custom Theme Previews
Templates
Website Templates
Landing Page Templates
System Templates
Blog Templates
Modules
Installing Modules
Updating Modules
Creating Global Modules
Navigation
Hero
Footer
Columns
Tabs
Offers
Cards
Bling
Elements
Theme
Theme Styles
Global Site Header and Footer
Custom Fonts
Creating a child theme
Custom CSS
Users
Adding Users
FAQ
How can I change my page theme/template?
Can I upgrade my Sprocket Rocket Pro Theme to the new version?
Why are some modules on my Sprocket Rocket App locked?
How to customize a column size
What's the difference between Sprocket Rocket Pro and Sprocket Rocket Theme?
Do I need a HubSpot account?
jQuery version security issue
How to add users to your HubSpot Portal
Misc
Branding Setup
Marketplace Theme
Docs powered by archbee 

SR Nav Dropdown 01

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

Module Overview - SR Nav Dropdown 01

Available on:

  • Sprocket Rocket Free
  • Sprocket Rocket Pro

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.

Document image

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
Document image

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
Document image

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.
Document image

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

Document image

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.
Document image

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

Updated 30 Dec 2022
Did this page help you?
Yes
No
UP NEXT
SR Nav Min 01
Docs powered by archbee 
TABLE OF CONTENTS
SR Nav Dropdown 01 is a perfect module for Global Navigation on your pages
Module Overview - SR Nav Dropdown 01
Module Settings Walkthrough
Module Settings
How to Use SR Nav Dropdown 01 - Live Examples