How can I create a fixed left menu that changes the color of the link when navigating to another page, while using the CMS in Webflow?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To create a fixed left menu that changes the color of the link when navigating to another page using the CMS in Webflow, you can follow these steps:

Create the menu structure: Create a Collection called "Menu" with fields for the menu item names and their corresponding links.
Design the fixed left menu: Design your fixed left menu using HTML and CSS. You can use a div container with a fixed position, set its width, and apply the desired background color and styling to create the appearance of a side menu.
Add a Collection List: Add a Collection List to your fixed left menu. Set the Collection List to pull data from the "Menu" Collection and style the list items accordingly.
Link the menu items: Inside the Collection List, add a link block for each menu item. Link each item to its corresponding page using the dynamic CMS link field. You can access this field by clicking the "+" button on the link block, choosing "CMS," and selecting the appropriate link field in the Collection.
Add a current page state: To change the color of the active menu item when navigating to another page, you'll need to create a dynamic current page state. Select the link block inside the Collection List and go to the Settings panel on the right-hand side.
Create a Current State: In the Settings panel, find the "States" section and click on the "+" button to create a new state. Name the state "Current" or any other relevant name.
Define the style for the Current State: Customize the appearance of the "Current" state, such as changing the color, font weight, or background color of the active menu item.
Set the Current State: To make the current page menu item change dynamically, set the Current State condition using the dynamic data. You can access this by clicking on the "Select field" button next to the state condition and selecting the appropriate field in the CMS Collection.
Preview and publish: Preview your website to see the fixed left menu in action. Make sure to test the menu on different pages to ensure the active link color changes appropriately.

By following these steps, you can create a fixed left menu that changes the color of the link when navigating to different pages using the CMS in Webflow. This way, you can easily manage the menu links through the CMS interface and have a consistent user experience throughout your website.

Additional Questions:

How do I create a fixed left menu in Webflow?
Can I create dynamic menu links in Webflow using the CMS?
How do I style the active menu item in Webflow using the CMS?

How do I set up a hidden button to automatically sort items by name on my Webflow homepage using Finsweet's CMS Combine and CMS Sort?

Does Webflow have an option for creating a 5 image slider on CMS?

How can I set up two different email addresses for two different forms in my Webflow website?

Is there a way to make the links in the CMS link field in Webflow display as 'webflow.com' instead of 'http://www.webflow.com/' without using a plain text field?

In Webflow, why can't I find the 'Fancy Screen Shots' and its multi-image repository when trying to import them into a Collection List?

What is the purpose of creating a CMS collection using the Webflow UI?

What is the best way to add a slider in specific blog posts in Webflow?

How do I add the URL of a post when editing the settings page of posts in Webflow?

Does the client need to purchase both an Account plan and a Site plan in order to manage their website and blog via Webflow's CMS? And can the CMS perform tasks such as adding new pages, creating blog posts, editing content, uploading images, and adding multimedia elements to existing pages?

Why are some of the CMS collection links not functioning in Ayonalee's initial project on Webflow?