Sub Navbar (fixed as per Webflow Forum Design)

Design help General
1

Hi everyone!

I have a couple of queries, mainly to do with fixing a sub navbar, but also with my fixed navbar on my home page and also site searches.

Firstly, i am using two navbars on one page, the first one is my main navigation and the second is a sub navigation with information purely to do with the selected page.

The prefect example is the Webflow Forum page, when you scroll down their main bar disappears and then the grey section is fixed once the blue section has gone. That is what i am trying to achieve. Also, how do you add a site search to your site?

Second, when you keep scrolling up on my home page there appears to be a white section that starts to cut off my navbar logo and my links. I know people won’t always be scrolling up to that extent but i would like to stop that happening. Again, this doesn’t happen on the Webflow Forum site so there must be a solution.

Heres a read only link to my site: https://preview.webflow.com/preview/robs-five-star-site-78e407?preview=86da9b5f22ebb3e0f8981c2a13b74ba2

Thank you in advance.

Rob

1 Like
2

Sorry I forgot to add, to access the page with the sub navbar click on ‘other pages’ in the footer.

Thanks

Rob

3

Hello @rob630,

Unfortunately I could not find sub navbar on any page :confused: Maybe I miss something?

Cheers,
Anna

4

Hi @sabanna,

That is strange, i am not sure what has happened there. Please try the read only link below, i have checked this link and it is definitely there on ‘Other Pages’.

https://preview.webflow.com/preview/robs-five-star-site-78e407?preview=86da9b5f22ebb3e0f8981c2a13b74ba2

Thank you.

Rob

1 Like
5

Ok, now I can see it.

I hope I got your idea correct, you want that “sub navbar” appear only when user will scroll the page?

6

Swiftype integration working pretty good with Webflow

7

Hi @sabanna,

Yes that is correct, just like the Webflow Forum page. When you scroll down their blue nav bar disappears and the light grey one is then fixed to the top of the page.

Also, thank you for your input with regards to Swiftype, i will take a look over the next few days.

Thank you.

Rob

8

Hi Rob,

I will be happy to help you with this :smiley:

We will make interaction with scroll trigger, which will be activated when Navbar (regular one) will scroll out of screen view. Since there is no content right now, I added one more section for make page longer and let Navbar scroll out of view completely.

  1. “Sub nav” make position: fixed and align as you want it to be on the page. Add Transform: move Y: -100% (move up on 100%).
  2. Apply Interaction to Navbar:
    Trigger= Scroll, Affect different element: Sub Navbar
    Scroll in to view = Transform: move Y: -100%
    Scroll out of view = Transform: move to origin

That’s it :smile:

Video for more help: https://drive.google.com/file/d/0B-7cg8BSq1Z_N3pycFAwQ3NfZlE/view

Regards,
Anna

9

Hi @sabanna,

Sorry, i don’t think i was very clear with my post and i read your post incorrect.

I want the navbar and subnav to be in the position they are in when the page is open, but when the navbar is scrolled out of view the sub navbar becomes a fixed position.

What i am trying to achieve is exactly what this forum page has done. When the blue navbar is scrolled out of view, the grey sub navbar is then fixed.

I hope this is clearer.

Thanks

Rob

1 Like
10

Hi @rob630, I apologize for misunderstanding.

Basically it is almost all the same, just couple more steps:

  • Duplicate subnav.
  • Create simple div and give it class “fixed”, delete that div (it is only for creating global CSS class, which will be available in interactions)
  • Add combo class “fixed” to duplicated subnav
  • “Sub nav fixed” make position: fixed and align to the top. Make it display: none
  • Apply Interaction to Navbar:
    Trigger= Scroll, Affect different element: fixed
    Scroll in to view = display: none
    Scroll out of view = display: block

Video: https://drive.google.com/file/d/0B-7cg8BSq1Z_QzRQQzc0RlN4eFk/view

Regards,
Anna

11

@sabanna,

Perfect! Thank you very much for your help!!

Easy when you know how :grin:

Cheers,
Rob

1 Like
12

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