Webflow sync, pageviews & more.
NEW
Answers

How can I style the "Current" state of a menu item in Webflow using custom CSS?

To style the "Current" state of a menu item in Webflow using custom CSS, you can use Webflow's built-in CMS classes and some custom code.

First, you'll need to add a dynamic link to your menu item that will automatically reflect the current page. Follow these steps:

1. Select the menu item you want to style and open the Settings panel on the right.
2. Click on "Current" under the Display settings.
3. Choose the dynamic field that corresponds to the current page you want the menu item to represent. For example, if you're styling the menu item for the "About" page, you can choose the "About" dynamic field.

Once you've set up the dynamic link, you can write custom CSS code to style the "Current" state. Here's an example:

```css
.w--current {
/* Add your custom styles here */
color: red;
font-weight: bold;
/* Any other styles you want to apply */
}
```

In the code snippet above, `.w--current` is the class that Webflow automatically assigns to the menu item when it represents the current page. You can then apply any desired styles within the curly brackets.

For the example above, the menu item's text color will be red and the font weight will be bold when it is on the current page. Feel free to modify the CSS properties to suit your design needs.

After adding your custom CSS code, you can place it in the "Custom code" section of your project settings or add it to the page-level custom code section if you only want to apply it to a specific page.

Remember to publish your site for the changes to take effect.

Rate this answer

Other Webflow Questions