How to Underline Nav Link for Active Page

[lecksus (Ryan Leckie)]

Hey all. I’m relatively new to Webflow and have a question around the nav menu.

I’m trying to make it so the name of the page that’s currently active (e.g. “About” or “Contact”, etc) is underlined whenever that specific page is clicked on and made active.

Right now I have it so that the entire nav bar is a part of a symbol so I don’t know how I could accomplish this with how things are currently setup.

Any help or advice would be greatly appreciated!

I’ll paste a link to the URL below for your review.

Thanks all.

---

Here is my site Read-Only:
https://preview.webflow.com/preview/rg-johnson-company-inc?utm_medium=preview_link&utm_source=designer&utm_content=rg-johnson-company-inc&preview=6c34483e1dedb54f66248ccbd251fea9&workflow=preview

[madewithrelish (Shannon Ryan)]

Hey @lecksus, when you’re on the active page and select that page’s nav link, you’ll see that there’s a new green selector called Current. If you add an underline to that Current style, it will show up when you’re on that page.

Since you’ve added a selector for each page (‘nav-link about’, ‘nav-link careers’, etc.), you’ll have to style each Current link individually. If you don’t need those page-specific selectors, you can remove them and just style ‘nav-link Current’ once and it will apply to each page.

Hope that helps!

[lecksus (Ryan Leckie)]

Thank you, @madewithrelish ! This worked! Really appreciate it.