Adding 'active' state for mobile menu items when clicked

Store Design
, , , ,
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
Ronla1_0-1699271651133.png378×621 16.4 KB

Thank you :slightly_smiling_face:

2

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

3

No.
I mean a ‘clicked’ or ‘pressed’ effect when the user clicks the link.
There is no hover effect on mobile :slightly_smiling_face:

4

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 :down_arrow:

- Link Title

Let me know if that helps.

5

Hi :slightly_smiling_face:

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

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
  4. 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.