How can I change the color of a button on my side nav in Webflow when it is pressed and its landing page is opened?
TL;DR
- Wrap each button in a Link Block or use a Nav Link and link it to the correct page.
- Use the “Current” state in the Style panel to change the button’s color when its linked page is active.
To show a different button color when its page is active, use Webflow’s automatic Current state styling for navigation links.
1. Use a Webflow Link Block or Nav Link for Navigation
- Ensure the button is a Link Block or Nav Link element.
- If it’s not already a link, wrap the button inside a Link Block and connect it to a specific page in your project.
2. Assign the Button to a Page Link
- Select the button (inside a Link Block).
- In the Settings panel, under Link Settings, set it to link directly to the full page (e.g.,
/about,/contact).
3. Style Using the “Current” State
- Publish your site or use Preview mode, then go to a page so that the button points to the current page.
- When you're on that page, Webflow will automatically assign a
Currentstate to the corresponding link. - In the Style panel, you’ll now see the selector as
.your-class-name.current. - Change the color (e.g., background or text color) for this
.currentstate. This style will now apply only when the link points to the currently loaded page.
4. Repeat for Other Buttons
- Repeat this process for each nav button that links to an internal page. Each will get the
.currentstyle automatically when its linked page is open.
Summary
To change a side nav button’s color when its page is active, wrap the button in a Link Block or use a Nav Link, connect it to the correct page, and style its Current state. Webflow automatically applies this state on the page the link targets.