Making an underbar for links in the navbar that have hover?

Hello All,
I am trying to put simple colored underbars under the links in my navbar to indicate different sections. The links have a hover applier to it.

This is what I tried.
Added a div block to the Nav menu under the menu link I wanted the underbar. (tried to add it directly to the menu link but was not able to.)
Selected the div block (underline 1) and set position to Absolute

When I tried this only way I could get anything to show up was to set the relative position to full.
I also tried to add a lower border but that didn’t work either.

This is what I see:

Thanks for taking the time to read this.
Stay safe and enjoy!

The read only link: (Webflow - testa)

Hi there,

To style your navigation links consistently across your navbar, you can use Webflow’s class system. Here’s how to set it up:

Create a class for your nav links through the Style panel and apply it to all navigation elements you want to style uniformly. You can then customize the appearance using the Style panel’s various options.

For interactive states like hover effects:

  1. Select your nav link
  2. Go to the Style panel
  3. Click the Selector field
  4. Open the States menu
  5. Choose the state you want to style (e.g., Hover)
  6. Apply your desired styling for that state

Any changes made to the class will automatically update across all elements using that class, ensuring consistent styling throughout your navbar. You can learn more about working with classes in our documentation.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

This is valuable information but does nothing to solve my problem.