Link color issues (mobile only and external links)

Hello,

I have this weird bug where one of the items in the mobile nav shows in a different color: they are all styled the same (same class applied to all) and appear all the same on Desktop but on the mobile nav this one item is in blue.

I have [ all links ] class customized as well so maybe that’s effecting this item? Although these elements are buttons.

Thank you!

Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])

[1]:
[2]: Share a read-only link | Webflow University

Hey @Kateryna. It seems your CURRENT state settings for your links is set to have this blue color. It means the links that take you to the page you are currently on will show in blue. You can edit that by going to a page, opening the menu, selecting the current link and editing that state (you only do that once, it will apply to all links).

Side note, personal opinion: From a user experience point of view, it is actually a good practice to give current states a different color.

Hi Mr Finn, thank you for a quick reply!

The thing is that “Blog” link appears that color on all pages so not just current, and if i change color to something else “blog” still keeps this navy blue.
And yes agreed, I have an underline for current state to indicate the difference on Desktop, I’ll make M different as well but the above issue seems like a different problem.

It only started to happen with different buttons once I made edits to the master all links class, just realized my footer links are also messed up :exploding_head: (the empty spaced in columns are links that are using the same class as the rest) here the links effected go to external page and it I take the link out the style is fine…

Can I revert the [all links] the the webflow default?


Hey @Kateryna sorry just saw your reply.
Seems you have worked out the color issue (at least on my browser it looks fine).

One thing if I may add: If you notice, whenever you hover over a link in the footer and menu, they seem to “move” up and down a bit, when the border appears. That’s because the height is set to “auto”. Simply give your links (“Footer link” for example) a specified height (30 px should do it, more or less depending on the font size.

1 Like

Good catch thank you!

I just figured out the link problem, it was inheriting a visited color from “all links” > “all body”
In case some one else comes across this issue :hushed:

1 Like

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