Menu items not clickable on mobile

[Daniel19901]

Hi, it came to my attention that the header items of dropdowns on mobile - so each menu item that has a dropdown only opens the menu bellow although I also connected a link to it in the navigation. Can anyone help make the dropdown headers links work as well for mobile ? (so that the link will work and the dropdown as well- like on desktop 

https://www.ildetailing.com/

[KuldeepKumar20]

Hi

I have checked and It's working fine in mobile.

[Daniel19901]

it will just open and close the submenu, but the link of that tab itself won't work

[BSSCommerce-HDL]

Hi @Daniel19901, The problem is that there is a black block that is lying on top so the bottom part will be covered.

[Daniel19901]

@BSSCommerce-HDL hi, you misunderstood my my friend, I meant these links : I can only open and close the submeanu with them (for this I have the +- icons), but when I click on the text side it should take me to the link of that main tab, not continue to open and close the subtabs like the +- should do

[BSSCommerce-HDL]

Hi @Daniel19901, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

<script>
window.onload = () => {
let txt_has_submenus = document.querySelectorAll('#menu_mobile summary .hdt-block.hdt-line-clamp');
if(txt_has_submenus.length > 0) {
    txt_has_submenus.forEach(txt => {
      let link_url_summary = txt.closest('summary').getAttribute('data-url');
      txt.addEventListener('click', () => {
          window.location.href = link_url_summary;
      })
   })
}
}
</script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[Daniel19901]

@BSSCommerce-HDL thank you, but it didn't work 😞

[BSSCommerce-HDL]

@Daniel19901, Can you collaborate with me? I will check if it can be solved?

[KuldeepKumar20]

Hi 

I have noticed that no link added on the main menu like the submenu, Kindly add the link on the main for the redirection.

You need to customize in the code for this

For the reference check the screenshot

Thanks

[KuldeepKumar20]

Or you can try this code

$('.hdt-has-children.hdt-relative span.hdt-menu-link-text.hdt-block').click(function(){
var page_url = $(this).parent().parent().attr('data-url');
console.log(page_url);
window.location.href = page_url;
})