Clickable Parent Dropdown Menu.

[ARPRO]

Hello,

I would like to have the ''Water Fed Poles & Accessories'' / ''Traditional Window Cleaning'' and ''Support'' menu to go to the pages that they are assigned to after clicking them.

Also I would like to have the ''Water Fed Pole Accessories'' to be made so after clicking it goes to the assigned page.

I would like to have them clickable without any design changes (still ''lights up'' when hovering over / doesn't turn blue etc.)

Webiste: www.arprosystems.com

Could someone please help me do this?

Thank you in advance.

[topnewyork]

Hi @ARPRO ,

Use the instructions told in the attached image then let me know.

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[ARPRO]

Hello,

Just wrote this code in the header-dropdown-menu.liquid.

Now I have the clickable menu items in purple, but I would like them to be exactly as before.

 

Also, the ''Water fed pole accessories'' that is under the ''water fed poles & accessories'' still isn't clickable.

Could you help a bit more please to turn the menu items into the design that they were before, and also turn the ''water fed pole accessories'' into the same clickable menu item?

[topnewyork · Accepted solution]

@ARPRO dont change the above/previous code and do the following, as you can see the line number in first image, is where you have to wrap the span under <a> tag for water fed poles & accessories to work.

For styling add this: class=" list-menu__item link link--text focus-inset"

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[ARPRO]

I have put in the codes that you have provided.

The purple color has been fixed, but still the design is not as before - the menu items are now constantly highlighted with an underline, but before they were highlighting and underlining only when hovering over.

Also the sub menu ''Water Fed Pole Accessories'' is going to the wrong link when clicked. It should go to https://arprosystems.com/collections/water-fed-pole-accessories

instead of https://arprosystems.com/collections/water-fed-poles-accessories

In the backend, I have setup the sub menu correctly...

Could these things be fixed too please?

[ARPRO]

Fixed the sub menu not going to the right link myself. Now I only need the design of the menu items to not be constantly highlighted/underlined.

[topnewyork]

Hi @ARPRO , 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
a#HeaderMenu-water-fed-poles-accessories, 
a#HeaderMenu-traditional-window-cleaning, 
a#HeaderMenu-support {
    text-decoration: none !important;
    color: #bbbbbb !important;
}

a#HeaderMenu-water-fed-poles-accessories:hover, 
a#HeaderMenu-traditional-window-cleaning:hover, 
a#HeaderMenu-support:hover {
    color: #ffffff !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[ARPRO]

Hello,

The only thing missing now is that the menu item doesn't stay highlighted with an underline when clicked on, like the other menu items.

Could that be fixed too, please?

[topnewyork]

Replace my previous css styling code with this and then tell me:

/* Default link styles */
a#HeaderMenu-water-fed-poles-accessories, 
a#HeaderMenu-traditional-window-cleaning, 
a#HeaderMenu-support {
    text-decoration: none !important;
    color: #bbbbbb !important;
}

/* Hover styles */
a#HeaderMenu-water-fed-poles-accessories:hover, 
a#HeaderMenu-traditional-window-cleaning:hover, 
a#HeaderMenu-support:hover {
    color: #ffffff !important;
}

/* Active link span styles */
a.header__active-menu-item span {
    color: white !important;
    text-decoration: underline !important;
    text-underline-offset: .3rem !important;
}

First replace previous css with the new one given above then hit save and check and if it doesn't work then add the below codes as instructed. 

document.addEventListener("DOMContentLoaded", function() {
    const currentUrl = window.location.href;
    if (currentUrl.includes("water-fed-poles-accessories")) {
        document.getElementById("HeaderMenu-water-fed-poles-accessories").classList.add("header__active-menu-item");
    } else if (currentUrl.includes("traditional-window-cleaning")) {
        document.getElementById("HeaderMenu-traditional-window-cleaning").classList.add("header__active-menu-item");
    } else if (currentUrl.includes("support")) {
        document.getElementById("HeaderMenu-support").classList.add("header__active-menu-item");
    }
});

After adding this JS code and the Css, I've given you in this reply. It should work. Please let me know.

[ARPRO]

Hello,

It is underlined now, but not highlighted when clicked.

[topnewyork]

Check the below css:

/* Default link styles */
a#HeaderMenu-water-fed-poles-accessories, 
a#HeaderMenu-traditional-window-cleaning, 
a#HeaderMenu-support {
    text-decoration: none !important;
    color: #bbbbbb !important;
}

/* Hover styles */
a#HeaderMenu-water-fed-poles-accessories:hover, 
a#HeaderMenu-traditional-window-cleaning:hover, 
a#HeaderMenu-support:hover {
    color: #ffffff !important;
}

/* Active link styles */
a.header__active-menu-item {
    color: white !important;
    text-decoration: underline !important;
    text-underline-offset: .3rem !important;
}

[ARPRO]

Didn't work. Still not highlighted. But I think it is still good enough.

Thank you for all the help these 2 days.

Really appreciate you!

5 Stars

[topnewyork]

Kindly hit the like and mark it as the accepted solution. Thanks!