Streaming live at 10am (PST)

Unique navbars on home page VS. pages

Hello there Webflow cowboys and wizards!

This is probably the simplest thing, but I can’t figure it out.
Would be great if someone had a rope (strings to pull?), magic beans, a map, telepathic abilities or just a virtual cupcake for moral support.

Ok, hold on to your horses (or wands):

I need to use a different navbar on my other pages, the home page navbars needs to be unique.

I have two things I can be happy with to solve the problem:

  1. Only use the “small” navbar on other pages. (That shows when scrolling on home page) With modifications.
  2. Change color in “big” navbar (only visible on top of home page right now) + use small navbar, with modifications

To always show my “small” navbar, the one that shows up when scrolling further down the home page, on other pages. Without my bigger “intro-navbar”.
Can’t figure out how to make it stick/stay at top or even show. It has interactions linked to it (is a Symbol) as it is used in a certain way on home page. Interactions for the small navbar is to show up when you scroll into a section. Since that section is not on any other page, I can’t change it because it affects the navbar on all pages (Symbol).

The color on the home page-navbar needs to remain unchanged, but different on another page.
Text is white on home page and needs to be grey-ish on the other pages. If I change this it’s also changed on home page, since it’s a Symbol.

The other pages will contain non-covering photos (white background at top) and therefor I need the navbar to be contrasted, visible at all times.

I’ve tried creating a new navbar/Symbol but it is still affected by the interactions.
Not so keen on rebuilding the navbar (not making it a Symbol) on each page just to make it work.

How can I solve this?

Ripping my hair out right now over an empty cup which used to hold coffee. Halp.

Link to the mess: Take me into the void.


Hi I have a bit of a hard time to understand what you want.

I got that you want a certain navbar on home, and another navbar on inner pages. Right?
I got that you’re using 2 navbars on home with an interaction, to go from a tall one to a slim one.

So why not use as much navbars as you need?

Like this:

On all the inner pages, use a slim, normal, non interactive navbar. Make it a symbol because it will repeat on all inner pages.

Now, treat home as an exception. And craft a HOME NAVBAR especially for home. And here, only use symbol to have both versions of the HOME NAVBAR (tall and slim) in sync. (but you could also create no symbol at all on home as it is an exception).

On home, you’ll create one div called “slim navbar” and put your home navbar symbol in it. You will also create a div called “tall navbar”, put your home navbar in and add some padding. Now affect them the interactions you were using before.

Now you can do pretty much what you want. of course you have 2 different navbars to maintain, but that’s really OK when you need to give your homepage special treatments.

Have you designed that crazy blue stationary? Absolutely great. And why is there a brochure with leather and copper pages? You haven’t filled the About page yet so I don’t really understand what you do…

insert cupcake here

Hello Vincent, thank you for your reply!

I’m not sure I even knew what I wanted in the first post, a lot of jabber that was!
But you got it right.

And of course it was about as easy as I thought.
The solution will probably be to not make the home navbars be Symbols. And make a separate one for the inner pages.
I’ll give that a try!

I tried making a new navbar earlier, but it was affected by the interactions as well. It might have been a bug of some sort, or most likely me not being too great at building navbars.

2 navbars to maintain is way much better than like 10, so thank you!

“Crazy blue stationary”, I think that might be the new headline for that project.
And yes, it’s my own design :slight_smile: I re-designed a brand (logotype + visual identity + website) for a tech/consulting-company. Glad you liked it!

The “brochure” is their brand book, containing rules for the brand. Typography, logotypes, colors and so on. The leather and copper is 2 elements in the interior design part, or as a tactile compliment to the printed/analogue colors, not used on the web.

I always like to implement the tactile part as much as I can in my designs. And opening a brand book to feel the smell of leather is just awesome.

I’m a graphic designer :slight_smile:
With focus on the tactile, craftsmanship, typography and the optical version of design.
Do all kinds of things, like logotypes, re-designing brands, book design, sculptures (well, once), also photography, some web design, sewing, silverworking, leatherworking, i don’t know. All I can try, I try.

And awesome, thank you for that cupcake!
* mental cupcake bar filled *

1 Like

It takes talent to make strong colors like this work. So yes take that as a compliment :slight_smile:

You have 1 more twitter follower now so I hope you share more of your future works :slight_smile:

Wow, thanks :slight_smile: I sure take that as a compliment!

Haha, thank you! I’m sadly never on twitter due to lack of time, but maybe I should try to start.

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