How to make a sticky/fixed tab menu together with Navigation for tab components

Community resources
1

Hi Friends,

After a lot research, I still can not fix this problem, so I have to ask for help.

Here is the preview link: https://preview.webflow.com/preview/pauls-supercool-site-fbe30e?utm_medium=preview_link&utm_source=designer&utm_content=pauls-supercool-site-fbe30e&preview=df13c1e67d8c1119b52337a71b21bfd8&pageId=627a01d65c5239d291acca98&workflow=preview

Problem:

  1. I want this tab menu sticky on top, together with the top nav, so visitor can always find both navi bar and tab menu quickly.

  2. I have tried to set menu sticky, and set the tab or page wrapper relative, but do not know how to make both navi bar and tab menu sticky together.

    1
    11874×869 142 KB

Could anyone please help?
Thank you very much
Jerome

2

Hi @JeromeChina,

You’ll need to do the following to get this sticky tab menu working:

  1. Reset the overflow setting on ‘Page Wrapper’ to visible ( * Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element. source: Creating a sticky sidebar | Webflow University)

  2. Set the position of the Page Wrapper div to ‘relative’

  3. Set the ‘Navigation Menu’ element to position: sticky with a top value of 0 (or any number).

Here’s a screen recording showing those steps in your project: Screen Recording 2022-05-10...

1 Like
3

Hi Milan,
Thank you very much for your help.
Do you know how to make the tab menu and navigation both sticky?
Then visitor can see both navigation bar and tab menu both when scrolling.

image
image1071×117 17.3 KB

4

Hey Jerome,

No problem! Here’s another recording to make both elements sticky: Screen Recording 2022-05-10...

You’ll just need to set both the ‘Navigation Menu’ and ‘Top Bar’ to position: sticky. Navigation Menu has top value of the ‘Top Bar’ height - I used 70px in the video. Top Bar top value can be set to 0.

Make sure ‘Page Wrapper’ is set to overflow: visible and position: relative.

Let me know if any issues!

1 Like
5

Hi Milan,

Thank you very much for your help.
I am a webflow user from China, do you have any service, like building webflow pages, fix small webflow page problems.
I am glad to pay for these service.
Could you leave me your service website? Or you can also get me a service list if no website.
My email: muutuu2011@gmail.com

Thank you

6

Hi Jerome,

I don’t have a service but if you have any small fixes you can send me a DM and I’ll look into it for you!

For page/full site builds I’d recommend checking out https://experts.webflow.com/ to find an agency/freelancer to work with.

Cheers!

1 Like
7

Thank you very much Milan.