How can I style the "Current" state of a menu item in Webflow using custom CSS?
TL;DR
- Navigate to the Designer in Webflow, select the menu item linked to a page or section, and use the .w--current class for items in "Current" state.
- Add custom CSS targeting .your-menu-class.w--current in Project Settings under the Custom Code tab.
- Save changes and publish the site to apply the styles.
To style the "Current" state of a menu item in Webflow using custom CSS, follow these steps:
1. Identify the Selector
- Navigate to the Designer in Webflow and select the menu item you wish to style.
- Make sure the item is linked to a page or section to enable the "Current" state.
2. Utilize Webflow's Class Naming Convention
- Webflow automatically applies a special class to items in their "Current" state.
- This class is typically formatted as .w--current.
3. Add Custom CSS
- Go to Project Settings and select the Custom Code tab.
- Insert your custom CSS within the
<style>tags in the Head Code section.
4. Write Your CSS
- Use the .w--current class to target the current menu item state:
```css
.your-menu-class.w--current {
/ Example styles /
color: #FF5722;
background-color: #ECEFF1;
}
```
- Make sure to replace .your-menu-class with the actual class applied to your menu items.
5. Publish the Changes
- Save your changes in the Project Settings.
- Publish your site to view the changes live.
Summary
To style the "Current" state of a menu item in Webflow using custom CSS, identify the .w--current class Webflow applies to active links, write your desired CSS in the Project Settings, and publish the site to apply the styles.