Adding 'active' state for mobile menu items when clicked

Ronla1
Excursionist
24 1 1

Hi,

I want to add an 'active' state to the menu items on the mobile menu so that when users click the title it will change color or font weight.

Website link: www.sassysusa.com

Ronla1_0-1699271651133.png

 

Thank you 🙂

Replies 5 (5)

DeepVyas
Shopify Partner
724 6 6

Do you mean to add hover effect, whenever user move the mouse ?

Shopify Developer | Ⓢ : deepvyas71 | ✉ : deepvyas71@gmail.com
Ronla1
Excursionist
24 1 1

No.
I mean a 'clicked' or 'pressed' effect when the user clicks the link.
There is no hover effect on mobile 🙂

pierrewebdev
Shopify Partner
34 1 6

For this you can use link.active property on the liquid link object.
It returns a boolean value (true or false depending on if the user is on that page)

You can use that property to set some css with the style attrubute

Here is an example below ⬇️

 

<li {%if link.active %} style = "color:blue" {% endif %}>Link Title </li> 

 


Let me know if that helps.
 

Ronla1
Excursionist
24 1 1

Hi 🙂

@pierrewebdev Where do I place the code?
On the custom CSS or in the site code?

pierrewebdev
Shopify Partner
34 1 6

You're going to have to do the following:

  1. Go into the theme code and find the section that controls your site's header
  2. Look through the code to find the logic that controls how links in your navigation menu are displayed. The code will be making use of the linklists and linklist liquid object
  3. Add that code to each <li> tag you see inside of the code that displays the navigation menu.

 

Also keep in mind that in my version of the code I said link.active but the word "link" will refer to whatever is used inside the for loop for the linklist object.

If you need any help with this, feel free to reach out.