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.

If you want to style the currently selected link in your Webflow Navbar without relying on a current state class, you can achieve this using custom code and some JavaScript. Here's a step-by-step guide to help you out:

Step 1: Add a custom attribute to the Navbar link
In the Webflow Designer, select the Navbar link element and open the Settings panel. Add a custom attribute by clicking on the plus (+) icon in the Attributes section. Name the attribute, for example, "data-current-link" and set its value to false. This attribute will be used to track the active link later on.

Step 2: Implement JavaScript code
Next, you'll need to add some JavaScript code to your project to handle the active link styling. You can add this code either in the page settings or within an external JavaScript file if you're using custom code.

```javascript
// Specify the Navbar class or ID
var navbar = document.querySelector('.navbar');

// Get all Navbar links
var links = navbar.querySelectorAll('.navbar-link');

// Loop through each Navbar link
links.forEach(function(link) {
link.addEventListener('click', function() {
// Reset the 'data-current-link' attribute for all links
links.forEach(function(link) { link.setAttribute('data-current-link', 'false'); });

// Set the 'data-current-link' attribute to true for the clicked linkthis.setAttribute('data-current-link', 'true');

});
});
```

In this code, the `querySelector` method is used to select your Navbar container element. You can specify the Navbar class or ID accordingly. Then, with `querySelectorAll`, all the Navbar links are selected and assigned to the `links` variable. A click event listener is added to each link, and upon clicking, the `data-current-link` attribute is set to `true` for the clicked link and `false` for other links.

Step 3: Style the active link
Finally, you can apply the desired styling to the active link using CSS. You can use the attribute selector in CSS to target the link with the `data-current-link` attribute set to true. For example, to add a line below the link text, you can use the following CSS code:

```css
.navbar-link[data-current-link="true"] {
/* Add your active link styling here */
border-bottom: 2px solid red;
}
```

Make sure to replace `.navbar-link` with the appropriate class or selector for your Navbar links.

That's it! With this implementation, the active link in your Navbar will dynamically have the desired styling, and you won't need to rely on the Current state class provided by Webflow.