How can I underline the name of the currently active page in the nav menu using Webflow?

Published on
September 22, 2023

To underline the name of the currently active page in the nav menu using Webflow, you can follow these steps:

  1. Select the navigation menu element: Go to the Webflow Designer and select the navigation menu element that you want to customize.

  2. Add a class to the navigation menu element: In the right panel, you'll see the Styles tab. Click on the "+" button next to the "Class" section to create a new class or edit an existing class for the navigation menu element.

  3. Style the underline: With the class selected, go to the Styles panel and scroll down to the "Border" section. Click on the "+" button next to "Border" to add a new border style. Choose either "Bottom" or "Top" for the position of the border, depending on where you want the underline effect.

  4. Set the border style: Customize the border style by adjusting the color, thickness, and width. You can also change the border style to a dashed or dotted line if desired.

  5. Apply the class to the active page: Go to the pages panel on the left side of the Designer and select the page that you want to mark as active. With the page selected, go to the Styles panel and scroll down to the "Class" section. Click on the "+" button next to "Add Class" and select the class that you created for the navigation menu element.

  6. Style the active link: With the class applied to the active page, you can further customize the appearance of the active link by modifying the color, font weight, or any other desired styles.

By following these steps, you can easily underline the name of the currently active page in the nav menu using Webflow.

Additional Questions:

  1. How do I style the navigation menu in Webflow?
  2. Can I create dropdown menus in Webflow?
  3. How can I create a sticky navigation menu in Webflow?