Navigation bar with dark and light modes, possible?

Design help Animations & Interactions
1

Hello:)

Does anybody knows how to make a nav bar which has two modes, dark and light. The idea is to switch between them depending on the height of the page for example.

Reference: https://newgenre.studio/

Thanks so much in advance:)

1 Like
2

Hi there,

To create a navbar that shows/hides on scroll, you can use Webflow’s native scroll effects or implement a custom solution using interactions. Here’s how to do it with scroll effects:

For showing/hiding the navbar on scroll:

  1. Select your navbar element
  2. Open the Interactions panel
  3. Add a scroll effect
  4. Choose “While Scrolling In View”
  5. Set the initial appearance (fully visible)
  6. Add movement or opacity animations to hide/show based on scroll direction

For implementing dark/light mode transitions based on scroll position, you’ll need to use custom code. You can create this functionality by:

  1. Adding a custom attribute to your navbar
  2. Using custom CSS classes for light and dark modes
  3. Implementing JavaScript to track scroll position and toggle these classes

The custom code solution allows for more dynamic control over your navbar’s appearance as users scroll through different sections of your site.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

2 Likes
3

Hey @Radovan_Milanovic ,

To add-on to the AI answer above, you can find cloneables like this one which uses a custom library or this one which uses GSAP code to achieve the same effect that you are aiming for your project.

You can also explore setting up Interactions - the classic one or GSAP to set this up in a no-code way via Scroll trigger.

Hope this gives you some idea to explore and test for your project.

2 Likes
4

Thanks buddy! Love it :slight_smile:

1 Like