Streaming live at 10am (PST)

Nav Header Color Change

Hi All,
I’m trying to change the text color on my nav bar ONLY on the “Blog” page to black. Can anyone help?

Here’s my read only link.
https://preview.webflow.com/preview/blog-1-324f36?preview=2931a64aaca3436d85c5da8ad545f4e9

Thanks!

Hi @Ashley_Janelle

As you are using a symbol, you can do this by going to the Blog page and unlinking the Navbar symbol: https://university.webflow.com/article/symbols

Then you can duplicate the classes with a different class name and make changes to suit that page only - as the symbol is unlinked, this is now just a standalone navbar for that page…

Hope that helps :slightly_smiling_face:

The unlinking worked but it still changed the nav item colors on the rest of the pages.

You’ve missed this part :slightly_smiling_face:

So go to a navlink on the blog page, click the dropdown on the class name and ‘duplicate’ and give it a name like ‘nav link blog page’ then you know you are styling only that page’s nav links.

hmm it still didn’t work after that. Are you able to take a video of how this can be done?

Gladly Webflow have the videos covered for this:


A couple of screenshots to help with your use case:

duplicate%20class

new%20class%20name

Make sure to click the tick to create the new class once you’ve given it a name.

Which tick is that? I tried it and its still affecting the rest of the site

This one - red arrow

It is checked and still changing globally

It looks like you have created a ‘blog class’ which holds the ‘nav links’

However it is the ‘nav links’ inside that you need to create a duplicate class for…

Once you have duplicated those you can style just those ones…

ok great that worked thank you!

Awesome :tada: - duplicating classes is really useful when you have already created some styling on a repeated element like a navlink or a button, but want to give just one of them a unique style.

Question: while this worked, why duplicate the class instead of just creating a combo class for that pages nav links?
I’m asking honestly here as I’m not sure if one way is better or just different.

Hi @Bradpaulp

Good question - and I think it’s really down to personal choice/the project in hand - both approaches could work for @Ashley_Janelle - duplicates was the one that came to my mind on that occasion.

Combo - creates it’s own styles, but if the original class is changed, it inherits the changes.
Duplicate - inherits styles initially, but is then ‘free’ of the original and keeps any styling you give it.

More details on it here: https://university.webflow.com/article/combo-classes - in particular the final paragraph with some clarity: