Webflow sync, pageviews & more.
NEW
Answers

What is the best way to create a yellow line under the menu-item 'Projects' on the 'Projects' page in Webflow?

To create a yellow line under the menu item 'Projects' on the 'Projects' page in Webflow, you can follow these steps:

1. Select the menu item 'Projects' on the 'Projects' page in the Designer.

2. Navigate to the Style panel on the right-hand side of the Designer.

3. Scroll down to the Border section and click on the "+ Add Border" button.

4. Set the following properties for the border:
- Type: Choose "Solid" for a continuous line.
- Width: Set the desired thickness for the line.
- Color: Choose a yellow color for the line.

5. By default, the border will be added around the entire menu item. To make it appear only at the bottom, click on the "All Sides" button next to the Border section.

6. In the dropdown menu that appears, select the "Bottom" option. This will ensure that the yellow line only appears at the bottom of the menu item.

7. Adjust the length and position of the yellow line by adjusting the padding and margin properties of the menu item, if needed. You can do this by selecting the menu item and modifying the values in the Position and Size sections of the Style panel.

8. If you want the yellow line to appear on hover or when the menu item is active, you can create interactions in Webflow. For example, you can use the hover or current state trigger to change the color of the border to yellow on hover or when the page is active.

Remember to preview your changes by clicking on the eye icon at the top right of the Designer to ensure the yellow line appears as desired.

Rate this answer

Other Webflow Questions