I'll create a floating navigation bar that transforms from a full-width standard layout to a compact floating style when scrolling.

I've created a floating navigation bar with two distinct states:

Key Features:

State 1 - Standard (Initial):

• Full-width navigation bar
• Larger logo and text
• Standard padding and spacing
• Subtle backdrop blur

State 2 - Floating (After Scrolling):

• Compact floating design with rounded corners
• Smaller, more condensed layout
• Icons appear on desktop for space efficiency
• Enhanced backdrop blur and shadow
• Centered with max-width constraint

Technical Implementation:

• Scroll Detection: Uses useEffect and addEventListener to track scroll position
• Smooth Transitions: CSS transitions with 500ms duration for all state changes
• Responsive Design: Different layouts for mobile and desktop
• Mobile Menu: Collapsible hamburger menu for mobile devices
• Backdrop Effects: Glass-morphism with backdrop blur
• Gradient Styling: Modern gradient colors for branding

The navigation automatically transforms when you scroll past 50px, creating a smooth and modern user experience. Try scrolling to see the transformation in action!