โ–ผ
Streaming live at 10am (PST)

Layout Help - Add Tabs to Navbar ๐Ÿ™

Hey Webflow Users,

I have a layout issue I am trying to solve, but so far I have come up short. I am making a portfolio site where the end goal is the below image. You can view the live URL here and this is the read-only link.

My specific issue is with this section below:

I want to create a layout where the tabs are part of the navbar. In this case, the tabs would be the text โ€œEverything, Web Design, etc.โ€ And to add one more layer of difficulty, I am wanting the items in the navbar (logo, tabs, etc) all evenly distributed from start to end.

So far I have not been able to come up with a solution. Hoping someone smarter than me in the community can help!

Thanks!

Iโ€™m guessing you want to make the words โ€œactiveโ€ i.e. when clicked, do something. Youโ€™ve already built a navbar so no need to add from the components. Based on this, I suggest two ways to do this, check out the image.

Hi

Use flex box

Hey @TheCat and @shokoaviv - thank you for the replies!

I donโ€™t think I explained myself very well. I need the different text items in the navbar (โ€œeverythingโ€, โ€œweb designโ€, etc) to be tabs from the tabs component, and I want them to be in this exact spot. I have not been able to figure out a way to do this in Webflow yet.

Hi

Hope this will helps :slight_smile:

@shokoaviv I still need to add the other elements from the navbar though - logo, menu icon, etc. Any ideas?

Now insert the nav bar items into the tabs, each link to each tab.

@shokoaviv Unfortunately you canโ€™t add any other components inside a tab menu. This is my issue, and I am trying to find a work around.

Hi

Yes We can! Let me show you :slight_smile:

1 Like

@shokoaviv would love to see what ideas you have!

But why would my logo be a tab? When someone clicks it, I want them to come back to the home page, not view content in tab 1?

You can use Position to make the tab links bar go up and sit in your top bar.

Or you can craft your own tab system. You make as many sections as tab and you hide them all except the first one. Then on each link you affect an interaction that 1/ hides all content sections and 2/ show the relevant section.

You must have a reason to use tabs, but the design of your page makes the user think theyโ€™ll get to a new page by clicking those links. Anyway, hopefully in the near future weโ€™ll have a feature to dynamically change the sorting and filtering of a Collection List on the fly.