Style Navigation item in "Current" state

Design help General
1

Hi Webflow Community👋

I have problems with styling my navigation bar:

  1. I don’t know how style my “current” state of the navigation single item. I made "on hover animation: and I want to have this same look in the “current” state on my navigation single item. I can change the color of the font but I can’t display this yellow line in the “current” state. Image how “current” state should look like below

09
092230×838 44.8 KB

  1. The second issue is font weigh in “current” state. Labels on navigation are moving every time when I click on them. This is because of the font weight( is bolder) on “current” state. I don’t know how to solve this issue.

Good people, please help :pray:t3:

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

1 Like
2

Calling us good people does help :wink: . The easiest way for me to access the current state is

  • go to preview

  • select one of the links in the nav

  • go back out of preview mode

  • click to edit the symbol (nav)

The nav link you just clicked now has the ‘current’ state applied and you can style it any way you want to.

Here’s a video showing how I did it on another site, same principal change current state

2 Likes
3

Thank you @sarahfrison for your fast reply :man_bowing: but unfortunately, your tutorial will not solve my case. I’m sorry maybe I was not clear enough
I know to how to bring ”current” state in my navigation item but I don’t know how to add this yellow line behind the text to ”current” state item.:pensive:
When I’m trying to add the yellow line the ”current” tag disappear

Best regards
Michal

4

Hi
Add top yellow border to the menu button and use negative padding to set the border in the middle of the button

5

Ah, okay, sorry. That wasn’t clear. @shokoaviv’s idea could work so make sure to try and let us know how you got on :slight_smile:

6

Hi @sarahfrison and @shokoaviv

Thank you for your help regarding this devil yellow line. I found a different solution for that here is a link to a tutorial on how to do this.

Best regards

I gonna figured out how to solve my second issue with jumpiness label

CloudApp

1 Like
7

In case it helps anyone else: I’ve found that the “Current” state tag can be a bit buggy, sometimes not displaying when expected, causing your state styling to have odd results.

In my case, I went into preview, triggered the Current state, went back out of preview, selected the nav item and it DID NOT display the “Current” tag in the Selector. Worked for other nav items, but this one particular item just wouldn’t display it.

In order to fix it, I created a new subclass on the item called “Current”, and creating this forced the UI to update and display the “Current” state tag as well, which then allowed me to edit it as expected.