https://www.acuitymd.com/ look at header and footer link for an example. Link have an orange hover state but after a link has been visited the hover state no longer works. In the css the visited state is overriding the :hover state. I don’t know of a way to change the order or specificity in webflow but seems like a bug.
Hover color doesn't work on 'visited' links in nav menu - this seems like the same issue but I don’t understand the solution. Sounds like by some quirk he got it to work but trying the same didn’t product the same result for me.
Share Link It works correctly in webflow just not in stage/production.
Hey Tyler, this is strange indeed! I wouldn’t really use visited links unless you’re building documentation or some type of table of contents.
My advice would be to remove the visited styling all together and see if that helps - having different coloured links for visited, in the context of a website’s primary and footer navigation, seems confusing to me.
Sometimes Webflow does this weird thing were styles that were added with combo classes persist even after you’ve removed them. Might be worth checking to see if these classes have styled combo classes?
Could you explain how to do that? I don’t see any way to remove a color style once it’s applied. When I add a text link - set to update All Links and a state of :visited there is a color set. I tried setting it to transparent which isn’t what I want. I tried setting it to none. There doesn’t seem to be a way to remove a color once a color is applied. Tried inherit as the color and that still is overriding the hover color.
So is there a way to clear a color field in Webflow after it’s set?
If I’m understanding correctly you should just be able to go to a link that doesn’t have a class. Select on the Style Selector and then remove the visited styling from all links. I would then repeat this for the links that you’ve added a visited class to.
In order to see if there’s a combo class that’s still adding styles you can select the style selector of your nav link class and see if webflow recommends previous class. Add that class and see if that class has a visited style.
So, find any link and remove the class and then select the drop down and remove the colour for visited links or set it to the white of the body text:
Hopefully resetting those styles will remove any conflicts. Because I checked you code and the visited style was appearing after the hover styles and since CSS cascades downwards it’ll always override any class styles above it
That is the problem. There is no way to remove the color style that I can see.
I create a new link with no class - and try to remove the color from :visited but there is no way to remove it. The field requires something be entered in webflow. Is there a way to “clear” all styles? I don’t see it.
And that is the bug in Webflow. In the stylesheet :visited should not come after :hover, that doesn’t make any sense to have it set that way in the stylesheet
W3 Schools says that :hover must come after :visited, so Webflow has messed up here.
You might just have to write the CSS yourself or try clearing all colour styles on your links and starting again - just set colours to default, doesn’t need to be transparent. When you use the custom CSS editor it’ll override Webflow styles.
You can’t clear all styles in one unfortunately to the best of my knowledge. You’d just need to go to all the different colour styles for the different states eg hover, visited etc and clear them one by one
But anyway, using visited in your context is bad UX since it’s not necessary and might cause confusion. Visited becomes handy for docs and table of contents but for a main and footer nav I would avoid. May I ask why you want to have this style?
I don’t want :visited links globally, I think it was something I set when I was messing with things initially and now there is no way to remove it in Webflow.
You say just set to default. You also mention clearing them all manually. There is no way to do that. There is no way to get back to default with colors. Once it’s set, you can’t get back to no color (default).
I have my basic a:visited set with a color and there is no way to remove it that I can see in webflow.
even set to inherit fills a color, which will still override :hover because Webflow has :visited and :hover in the wrong order. That bug needs to be fixed or there needs to be a way to set :visited:hover
