Community forum for knowledge and support

Updated 3 months ago

A Disappearing Navigation Bar Based on Scroll Direction and Hero Section Background

At a glance

The community member has a navigation bar that appears on scroll up and disappears on scroll down. The navigation bar has a background, and 2 of the pages have the same background in the hero section. The community member would like the navigation bar to disappear when the hero section appears on those 2 pages, even while scrolling up, because the pattern doesn't match up exactly. Another community member suggests wrapping the navigation bar component in a "navbar_wrapper" div and styling the background of that wrapper based on the page, then retargeting the interactions to the new "navbar_wrapper" div.

I have a nav bar that I set to show up on scroll up and leave on scroll down.
The nav bar has a background, and 2 of the pages have the same background in the hero section, so I'd like that once the hero section shows up on those 2 pages, even while scrolling up, the nav bar should disappear because the pattern doesn't match up exactly. Is there a way to do that?
@Matt would you know? Thank you very much

M
S
2 comments

@Sara Margolies if you wrapped the navbar component in a div like “navbar_wrapper”, then you could just style the background of that wrapper to be whatever color you want it to be based on the page its on - leveraging CSS.

You’ll need to retarget your interactions to this new navbar_wrapper div.

@Matt DMing you more details to clarify

Add a reply
Sign up and join the conversation on Slack