Where did my Navbar link's "Current" state class go?

I am trying to style the currently selected link in my Navbar. However, I can’t locate the green “Current” state class. Initially, I had one for the default “Home” link but I deleted this link since I didn’t want a home link. However, I would still like to style whichever of the links corresponds to the page the user is currently on. For example, if the user is on the “Menu” page, I would like to style that link differently by putting a line below the link text. How can I do this if there is no Current state? Thanks.

I’ve figured out my problem and will document the solution to help others who have this question.

In order to see the “Current” class when you click on a Nav Link element inside the Navbar’s Nav Menu element, you need to do the following things:

  1. Drag a Navbar element onto the top of your home page.
  2. Create all the Nav Link elements you want inside the Navbar’s Nav Menu element.
  3. Create the individual pages that each of the Nav Links will point to.
  4. Go into the Element Settings panel and set each link to point to the appropriate page.
  5. Add the Navbar to each of those pages. The easiest way to do this is to make the Navbar a symbol and drag this Navbar symbol onto the top of each page.

Now when you go to any page and double-click the Navbar element in the Navigator, if you click the Nav Link element for the page you’re on, you’ll see the “Current” class in the Selector window. You’re now free to style that Current state however you like and that style will apply to all the links.

4 Likes

Hi @robertfdev here is a few links you can find when you use search input field on this forum or just use keywords “webflow current state” in your favourite browser but there is more great sources :wink:

@robertfdev how did you add the link under the link? It’s not working for me. Could you show that please? Thanks!

You can also create a global style with “embed” and insert a custom code for the current state.

.classname.w–current {

  1. color: #ff7a33;

}