Streaming live at 10am (PST)

Nav Header Color Change


#1

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!


#2

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:


#3

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


#4

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.


#5

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


#6

Gladly Webflow have the videos covered for this:


A couple of screenshots to help with your use case:

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


#7

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


#8

This one - red arrow


#9

It is checked and still changing globally


#10

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…


#11

ok great that worked thank you!


#12

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.


#13

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.


#14

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: