Solved

How to make header menu clickable in FAME template?

soniap88
Shopify Partner
7 0 0

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! 

Capture d’écran 2024-04-25 à 17.29.57.png

Accepted Solution (1)
theycallmemakka
Shopify Partner
1477 336 360

This is an 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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 10 (10)

theycallmemakka
Shopify Partner
1477 336 360

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

soniap88
Shopify Partner
7 0 0

Thank you for your prompt feedback 

 

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

 

Hygiene Salubrité > Hygiene Salubrité  Page

Paris > Centre paris 

Nancy > Centre Nancy 

 

 

theycallmemakka
Shopify Partner
1477 336 360

@soniap88 ,

 

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

soniap88
Shopify Partner
7 0 0

sorry  here's the preview link 

 

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

soniap88
Shopify Partner
7 0 0
theycallmemakka
Shopify Partner
1477 336 360

Hi @soniap88 ,

 

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

theycallmemakka_0-1714106705750.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

soniap88
Shopify Partner
7 0 0
Pass: Lisabron
theycallmemakka
Shopify Partner
1477 336 360

This is an 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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

soniap88
Shopify Partner
7 0 0

Hello, 

 

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

soniap88
Shopify Partner
7 0 0

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