How can I style the currently selected link in my Webflow Navbar without a Current state class? I want to differentiate the link for the active page, such as adding a line below the link text.
- Use Webflow’s page-specific body class to target and style active links using custom CSS in the page head.
- Add custom data attributes (e.g., data-page) to nav links and use JavaScript to match against the current URL and apply styles.
- For small sites, manually apply a unique class like active-link to the correct nav link on each page and style accordingly.
To style the active link in a Webflow Navbar without relying on the "Current" state class, you can use a custom attribute or page-specific class logic to target the link based on the current URL or a manual identifier.
1. Use Page-Specific Body Class
Webflow automatically adds a unique class to the <body> tag for each page, which you can use as a CSS selector to style navbar links differently.
- Webflow assigns a page-specific class to the
<body>, like page-home, page-about, etc. - Use custom CSS in the Page Settings > Custom Code > Head section to target and style navbar links based on the current body class.
Example:
If your About page has a body class
page-about, and the navbar link has a classnav-link, add the following CSS in the head:<style> body.page-about a.nav-link.about { border-bottom: 2px solid #000; } </style>Make sure to add a unique class (like
about) to the specific nav link element in Webflow so you can target it properly.
2. Use Custom Attributes with JavaScript
You can manually mark the active page by setting a custom attribute (e.g., data-page="about") on each nav link and checking against the current URL.
Assign a custom
data-page="about"to each link pointing to the corresponding page.Add JavaScript in Site Settings > Custom Code Footer or Page Settings > Footer Code:
``
This dynamically targets the matching nav link based on the current URL.
3. Manually Style Links Per Page
For small sites, you can manually add a new class to the active nav link on each individual page.
- On Page 1, select the nav link and add a class like active-link.
- Style that class to show the underline.
- Repeat for each page, applying the active-link only to the correct link on that page.
This method is manual but effective for simple sites.
Summary
To style the active link without using Webflow’s built-in “Current” state, you can leverage body classes per page, custom attributes with JavaScript, or manual per-page styling. For scalable, dynamic behavior, the JavaScript method is usually best.