Why is this navlink blue

Hi there,

The link in my nav bar is staying blue and I can’t seem to figure out where this styling is coming from. Would anyone be able to help me?

Many thanks!
Paulien


Here is my site Read-Only:
https://preview.webflow.com/preview/brite-test?utm_medium=preview_link&utm_source=designer&utm_content=brite-test&preview=22b928537d5f0d43291b54db0123df43&mode=preview

hi @PaulienEmily do you mean your navlinks current state? This is visual feedback for visitors on what page they currently are. You can change it in typography panel.

Hi Stan,
Thanks for your response.
I actually meant that a few of the links in my nav bar are blue. I had oringally styled my links to be this colour but changes this back to black - but for some reason some of the nav links remain this blue colour.

Can you see! where this styling is coming from?

Screenshot 2021-04-30 at 12.48.48|501x67

As Stan said, you haven’t styled the “current” version of the nav links.

It’s a bit unfortunate that Webflow works this way, but enter the link and force the styling by manually setting the color again:

2021-04-30 14_44_39-

1 Like

hi @PaulienEmily this blue color is current state If you need to change its color just click on color in typography and choose your color. Your basic styling is coming from page Style Guide. I really do not know from where is coming your basic link current state color and I presume there is some code that set this basic styling (as it is not set on Style guide page) or it can be WF basic style but I have doubt they will predefine color for current state as it doesn’t make sense to me, but… You can check your project setting as I do not have access to it to check if is there any CSS added in header. But you can overwrite All styles.

The unstyled blue color is coming from the style .w-nav-link.w–current
The “w” at the front of the class would indicate to me that this is a system setting applied by WF in the background.

After you apply a style to the link (using the “current” style in the WF designer) the class applied to the link changes to “nav-link.w–current” - dropping the “w-” prefix which would indicate to me that the default “system” style has been replaced by the user defined style.

image

yeh, It is a bit odd, not that WF predefine color for current state for no reason, but that reseting link color show only custom link color and doesn’t reflect predefined color that is currently applied by WF in color fields. I have never thing about that WF set for current state basic color as I have automatically applying custom styling. Not showing current applied color on link element is a bit confusing.

I agree completely. It would make sense to me that WF predefine the color for the current state as this state is not a regular link state.

The current state only exists when it is part of a larger element like a nav or tabs for example, and it is used to differentiate the link that is selected from the links in the larger element that are not selected. Another way of describing this would be to say it was the color for the link text in the “active” tab.

So maybe the current state was added as part of the larger process of defining a base for these larger elements - but I agree that any color applied by WF by default should be indicated in the style panel.

There are certain things that it would be very useful to have an “insider” perspective of :slight_smile: