✨ Develop the Sticky Navigation Component with Scroll Behavior

[bettybondoc]

cc @wicksipedia @isaaclombardssw @UlyssesMaclaren @adamcogan @miichaelsmedley @louisroa8189

Description
Create a Sticky Navigation component for the Consulting Pages that enhances user experience by providing easy access to key actions while scrolling. The navigation bar should disappear as the user scrolls down and reappear when the user scrolls up. By default, it will display a fallback Call-to-Action (CTA), such as "Book a Call," with the ability to customize the CTA for specific pages. To improve readability and aesthetics, the Sticky Navigation should include a subtle background blur effect.

Acceptance Criteria

• The Sticky Navigation component includes the following features:

• Default behavior:
  • Displays a fallback CTA (e.g., "Book a Call").
  • Remains fixed at the top of the viewport.
  • Scroll behavior:
    • Sticky Nav hides when the user scrolls down.
    • Sticky Nav reappears when the user scrolls up.
• Customization options:
  • Page-specific CTAs (override fallback CTA).
• Background blur effect:
  • A visually appealing blur is applied to the sticky navigation's background to improve readability and aesthetic appeal.

• Fully responsive across desktop, tablet, and mobile.
• Works seamlessly on all major browsers (Chrome, Firefox, Safari, Edge).
• Fields and CTAs can be customized or disabled for flexibility.
• Code is ready for theming (e.g., Light/Dark modes, custom colors – see linked PBI: ✨ Introduce Light/Dark Mode with User Control and Auto-Detect #3300).
• Tested and approved by Wicksy, Louis, and Betty.

Tasks:

• @bettybondoc - Design mockups for desktop and mobile view (see email: SSW.Website - Navbar and Search)
• TODO - Developer to update

Figure: Sticky Nav