Goal: In the Shopify Expanse 2.0 theme, make the navigation link for the current page display in a different color (e.g., “Products” turns white on the products page; “Home” turns white on the home page).
Proposed approach: Add an “active” class to the current-page nav item via Liquid, then style that class in CSS. A brief example was shared, but the Liquid snippet was incomplete and the CSS targeted hover (.active:hover), which doesn’t meet the request (needs a persistent active state, not hover-only).
Clarification requested: The poster asked for step-by-step guidance, including which file to edit and where to place the CSS for the active state.
Latest updates: A store preview link and the password (“password”) were provided so someone can inspect the theme and give precise instructions.
Status: Unresolved. Awaiting a concrete Liquid implementation (which template/section to modify to append an active class based on the current page) and the correct CSS (e.g., .active { color: white; }) after reviewing the shared preview.
I am working with the Expanse 2.0 theme. I want to make the nav bar change based on what page its on. My nav bar is fairly simple at this point. I have Home, Contact, Products, Collections. The font colors for the nav bar is black. When I am on the product page I want the product nav link to change to a certain color say white. then when I click the home link the home nav changes to white. Can anyone help me with this?
Thanks Ryan
Hi Randkhawley21,
You could add the following piece of code to your liquid file:
- ```
This will add the "active" class to your nav link.
You can add css to your active class. For example:
```css
.active:hover {
color: white;
}
Hope this helps. If it doesn’t. Try adding a piece of your code in here so I can try and make it more specific.
I have not found a solution for this issue. Your code solution says .active:hover… What I want is when I am on the products page the word “Product” in the nav bar is a different color. and when I click on the home page the word "Home " changes to a different color. if your code solution will result in this solution can you give me a bit more step by step instructions? like which file do I add the above code to? where do I put the .active:hover code?
Thanks
Can you share the preview link to your store please? So I can take a look.
password is password
What is the password?
password