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
- Use Link Blocks or Nav Links that point to internal pages and apply a shared class for consistent styling.
- Style the link’s “Current” state on the corresponding page to change its appearance when active.
To change the color of a side nav button in Webflow when its corresponding page is active (pressed and opened), use Webflow's Current Class state.
1. Use a Link Block or Nav Link for Navigation
- Ensure each side nav button is a Link Block or Nav Link that links to a page within your Webflow site.
- The applied class should be consistent across all similar nav items.
2. Style the Button Normally
- Select the reused class (e.g.,
.side-nav-button) and set the default styles (e.g., background color, text color, padding).
3. Apply Styles to the “Current” State
- Go to the page where a side nav link leads (e.g., “About” page).
- Select the corresponding nav button. Webflow will auto-apply a “Current” state to this link element.
- With the element selected (now marked with the “Current” label in blue), update its styles — change background color, font color, etc.
- These styles only apply when that nav link points to the current page (i.e., when it's “pressed”).
4. Ensure Links Match the Exact URLs
- Webflow only applies the “Current” class if the link exactly matches the current page URL.
- For example, linking to
/aboutmust match the About page’s slug exactly.
Summary
To change button color when its page is active, style its “Current” state in Webflow. This state only appears on navigation items that point to the page currently being viewed.