How to make header menu clickable in FAME template?

[soniap88]

I am currently using the FAME Template. 

I would like to have my menu header clickable like submenu. 

Where do I have to modify the code? 

Thanks in advance! 

 

[theycallmemakka]

We will have to write custom JS to do this.

Can you provide link to the store? And also list of links where you want each header item to lead? I can help you write JS to do this

[soniap88]

Thank you for your prompt feedback 

https://admin.shopify.com/store/lisabron

Hygiene Salubrité > Hygiene Salubrité  Page

Paris > Centre paris 

Nancy > Centre Nancy 

[theycallmemakka]

@soniap88 ,

The URL you have provided is an admin URL. I will require the link to preview the store. 

[soniap88]

sorry  here's the preview link 

https://lisabron.myshopify.com/?_ab=0&_fd=0&_sc=1

[soniap88]

https://qytuyp0q2cij3uv2-63567790241.shopifypreview.com

[theycallmemakka]

Hi @soniap88 ,

The site is password protected. Can you provide me the password to preview the store.

[soniap88]

Pass: Lisabron

[theycallmemakka · Accepted solution]

Hi @soniap88 

I have created CSS and JS. Can you try this and see if it works.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
li.header__menus-item.has-submenu:hover div {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: scaleY(1) translateY(0);
}

li.header__menus-item.has-submenu:hover svg {
        transform: rotate(-180deg)!important;
}
</style>
<script>
document.querySelectorAll('li.header__menus-item.has-submenu').forEach(function(e){
    var link = e.querySelector('a');
    link.addEventListener('click', function(){
        window.location = `/pages/hygiene-et-salubrite`
    })
})
</script>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[soniap88]

Hello, 

Thank you for your support, despite your clear instruction, the code doesnt work. the header menu is still not clickable 

[soniap88]

I've attempted without the tag <> and  It's working! thanks!!!

[BLCWebDesign]

How wich tags did you remove

[Marris]

Hi!
Any way you know how to do this with my theme Craft?
Page: https://4957c6-92.myshopify.com/collections/vattenflaskor 
Password: yaboff