Streaming live at 10am (PST)

How do i get my navbar to appear under my hero


#1

Hi,

I would like my Navbar to appear when i scroll down but not until i scrolled pass my Hero section. How do I achieve that?

Best regards
Mathias


Here is my public share link: http://marenco-3.webflow.io/
(how to access public share link)


#2

Hope this help


#3

Thanks but i still do not get it to work the way i want.

If you see my site, i want the navbar to behave in the same way until i scroll passed my hero slider. When passed my Hero silder i want my navbar to drop down. Any idea how this can be achieved?

At the same time i dont want any effect on the Navbar when in Mobile menu.

Like this;

http://builder-template.webflow.io/


#4

Can't say I know enough to offer help but are you looking for the navbar to appear once the hero is scrolled past without a navbar positioned at the top of the hero?


#5

You need to assign an interaction to a FIXED-DIV.
Use the transition to move the DIV above the visible portion of the screen (-100%).
When the Hero section goes out of the view - trigger the interaction to move the DIV into the correct position.


#6

We need the read-only link if you want us to work with you on this.

~B.


#7

Hi,

Here it is.

https://preview.webflow.com/preview/marenco-3-5aabea718be7343f2792f31c934ee?preview=60c0e8a045d0f171e0dbb9e5f48290d0

BR
Mathias


#8

Hi everyone,

Thanks for all the help so far!

I now accomplished to make the navbar behave as I intended but I still have one small problem. I dont want the effect of the navbar sliding down when browsing in Mobile Landscape and Mobile Portrait. Any suggestion?

https://preview.webflow.com/preview/marenco-3?preview=84d0cc0a90951b06bb8011c2efdf0ed7

Thanks/
Mathias


#9

Create a mobile only element...
- that is hidden for non-mobile.

Display your regular nav on non-mobile displays...
- hide it on mobile.


#10

Many thanks for all your help.

Really great forum!!


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.