I’m trying to update the nav links so that the link that represents the page you’re currently on is a different color. This seems like a simple task, but anytime i update the states, every nav link updates.
I’ve seen other forums mentioning the “current” state. I only see “current locale.” I’m not sure if that’s different or not? But either way, all links update when I select that.
I’m wondering if i have a little bug because even when I change the hovered state, all links change regardless of whether you’re hovering over it or not.
Yes, it’s a weird Webflow designer peculiarity.
Unlike other styling states, you can only access the Current state when it applies to the selected item.
Easiest way is usually to temporarily set one of your links you want to style to point to Home, and then edit your styling while you’re on your homepage.
@memetican thank you! I’m curious if I’m misunderstanding. The link i demonstrated was pointed home and I was on the homepage. perhaps I missed something? or perhaps it’s just not working
Interesting, there are apparently some differences on sites created before/after certain dates. I’ve never seen a formal explanation of what’s different, though there seem to be subtle designer differences.
Best guess in, Webflow’s made core changes to prep for localization, and didn’t want to risk breaking existing sites. Smart, but a bit too opaque for my comfort. Leaves us guessing on too many things here.
I’ve had this issue as well and have finally resolved it. Not sure if it will work for others as I’m actually pretty sure I did the same thing yesterday without success!
My navbar is a component and the same on all pages. I’m using client first naming. These are the steps I followed to resolve the issue:
Select a page and unlinked the navbar component on that page.
Select a navlink and set the link to the current page. (If it was the current page, I selected another page and then back to the current page)
I then had the “Current” style showing so made the changes I wanted.
Repeated for dropdown links.
I’ll keep that navbar unlinked and make all style changes there in the future.
Thanks @butchmenzies , that fixed it for me as well, I think I’d tried unlinking the nav from the component already and still didn’t see the ‘current’ state styling option, but changing the page from the current page first did the trick for me –
If it helps anyone else – when I just changed the nav link to another page and then back to the current one, it still didn’t show ‘current’ in the style option, but when I changed the link to an external link and then back to the current page, it worked.
To reiterate. I instantiated a new instance of the component. Unlinked it to the component. Was able to select the ‘current’ page link and se the ‘current’ status and adjust styles. Then I deleted the unlinked component. The styles stayed applied to the classes that are in the other instances of the component.
I had issues trying to make a toggle between 2 languages and styling the current language. I also wanted to use text other than the available options (ISO Code, Locale Name). I ended up using custom CSS for now but I hope Webflow fixes this as it seems like a bug. I used @memetican article and video for reference from here: Adding Locale flags to locale switcher? - #17 by memetican
.