Overview

The Sticky Tab Navigation Module offers a sleek and practical navigation solution by creating a sticky slider bar that stays pinned to the top of the viewport. Visitors can easily navigate to different page sections, improving user engagement and site flow. The module supports custom styling, dynamic link management with repeaters, and is optimized for seamless performance on desktops, tablets, and mobiles. No coding skills are required, making it accessible for marketers and developers alike.

Module Name: Sticky Navigation Tab
Module Live Preview: https://straightgrowth-4886091.hs-sites.com/sticky-navigation-tab-live-module

Getting Started

Add the Sticky Navigation Tab Module to your HubSpot page, configure navigation links, and provide an enhanced browsing experience effortlessly.

Key Features

  1. Sticky navigation bar that remains visible during page scroll.
  2. Customizable styling options including colors, fonts, and spacing.
  3. Dynamic navigation links using a repeater for easy management.
  4. Fully responsive design for optimal display on all devices.

Installation

  1. Open your HubSpot page editor and locate the Sticky Navigation Tab Module.
  2. Drag and drop the module into the desired position on your page.
  3. Configure navigation links and style settings as needed.
  4. Save and publish the page to activate the sticky navigation bar.

How to Use the Module

Step 1: Add the Module to Your Page

  • Navigate to the HubSpot page editor.
  • Drag and drop the Sticky Navigation Tab Module into your layout from the module sidebar.

Step 2: Configure Your Breadcrumbs

  • Use the repeater field to add, edit, or remove navigation tabs.

Step 3: Customise the Design

  • Customize colors, fonts, and spacing to match your website’s design.

Step 4: Preview & Publish

  • Click Preview to ensure your Stick Tab Navigation displays correctly.
  • Once satisfied, hit Publish to make it live.

Module Compatibility

✅ Compatible with all HubSpot CMS Hub subscriptions.
✅ Works with both default and custom themes.

Adding Sticky Navigation Tab Module to Your Page

Follow these steps to add the Sticky Navigation Tab Module to your HubSpot website page:

  1. Edit the page where you want to add the Sticky Navigation Tab Module.
  2. Click the (+) icon to add a new module.
  3. Search for " Sticky Navigation Ta" and select it from the list of available modules.
  4. Customize the module settings according to your preferences.

Available Fields:

Content - this group of fields is responsible for the module contents

Styles - this group of fields is responsible for the module styling

Best Practices

To maximize the impact of the Sticky Navigation Tab Module on your HubSpot website, consider the following best practices:


  • Keep page titles and links concise and informative.
  • Experiment with different hover effects and button placements to find what works best for your content.
  • Regularly review and update your Sticky Navigation Tab Module to keep your website fresh and engaging.
  • Consistent styling: Match font and colour with your site design for a seamless look.

Get Free Support

Need help setting up the module or customising it further?
We offer FREE 1-hour support for all our HubSpot modules.

Mail Us: resource@straightgrowth.com

Visit Website: https://www.straightgrowth.com/

👉 Book Your Free Support Session with Straight Growth

Request Free Access to Marketplace Module

Liked one of our paid HubSpot modules and want to experience it first-hand before purchasing?