Streaming live at 10am (PST)

Style Navigation item in "Current" state

#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

  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)

#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 https://screencast-o-matic.com/watch/cqe2bN0A3V

#3

Thank you @sarahfrison for your fast reply :bowing_man:‍♂ 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