What is the best way to create a yellow line under the menu-item 'Projects' on the 'Projects' page in Webflow?
TL;DR
- In Webflow, use the 'Current' state to apply a yellow bottom border to the 'Projects' menu item on its page.
- Adjust border properties and test across breakpoints to ensure correct display on all devices.
Creating a highlighted menu item with a yellow line under the 'Projects' menu when on the 'Projects' page can enhance user navigation. Here's how to achieve it in Webflow:
1. Use Webflow's Current State Feature
- Select the 'Projects' menu item in the Designer when you are on the 'Projects' page.
- Note that the menu item automatically gets a class name with 'Current' appended (e.g.,
menu-item current). - Ensure the 'Current' state is active before applying style changes.
2. Style the Line Under the Menu Item
- Set the menu item to have a bottom border. This can be done by adjusting the bottom border property in the Style panel.
- Select a yellow color for the border to match your design needs.
- Adjust the border-width to make sure it’s visible enough, like
2pxor3px, based on your design preferences.
3. Test Across Devices
- Check the design in different breakpoints to ensure the highlight appears correctly on both desktop and mobile versions.
- Adjust padding and margins if the design shifts, ensuring the line is positioned correctly under the word 'Projects'.
Summary
By using the 'Current' state in Webflow, you can easily style the 'Projects' menu item to have a yellow underline on the 'Projects' page. Use a bottom border for the menu item and ensure consistent rendering across devices.
