Solved

Mobile Version Of The Drop Down Menu Doesn't Work Correctly

ipekum
New Member
12 0 0
2 0 0

Hello,

My dropdown menu doesn't work correctly on mobile, it's supposed to expand and show the sub categories but instead it redirects to the main collection.

 <i class="fa fa-bars dropdown-toggle icon"></i> is there on the header.liquid but somehow it doesn't work. 

I can also add my mainmenu-mobile.liquid if needed  (Not sure if it's the source of the problem)

Would be great if you could help

Thanks in advance 🙂

Ipek

 

 

Accepted Solutions (2)
diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

There is a typo in my code, sorry, please replace all code with this:


<script>
function mobileFix(){

    var a = document.querySelectorAll(`.has-child .site-nav-link`);

    if (!a){
        return;
    }
    for (var each of a){
    each.addEventListener('click',function(el){
    el.preventDefault();
    el.target.classList.toggle('show--dropdown');
    });
    }
}

mobileFix();
</script>

<style>
@media (max-width:767px){
    .header .nou_megamenu{
    width: 100% !important; 
}
.show--dropdown + .sub-menu-dropdown{
    display: block !important;
}
}
</style>
◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@ipekum 

It would require a more complex custom code, if it's of your interest I'm available for hire and would be happy to help. 

Kindly click on "accept as solution" and "like" to help other people in the community with similar issues,


Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 17 (17)

Wahab_Ahmad
Shopify Partner
773 114 200

Hello @ipekum, share store link for troubleshooting problem 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Chat on WhatsApp .
Feel free to contact me Email : wahabahmadghori@gmail.com |
Buy Me A Coffee
ipekum
New Member
12 0 0

Hello @Wahab_Ahmad ! Here's the link: https://bothstores.com/ 

diego_ezfy
Shopify Partner
2935 562 883

Hello,

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one), I'll help you out to the best of my ability.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

ipekum
New Member
12 0 0

Hello, @diego_ezfy !

Here's the store link https://bothstores.com/ 

Unfortunately I can't share the password since I'm an employee to the store, but I can share the codes 🙂

 

diego_ezfy
Shopify Partner
2935 562 883

@ipekum 

Hey, I developed some code for you.

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
var a = document.querySelectorAll(`.has-child .site-nav-link`);

if (!a){
	return;
}
for (var each of a){
each.addEventListener('click',function(el){
el.preventDefault();
el.target.classList.toggle('show--dropdown');
});
}
</script>

<style>
@media (max-width:767px){
    .header .nou_megamenu{
    width: 100% !important; 
}
.show--dropdown + .sub-menu-dropdown{
    display: block !important;
}
}
</style>



Let me know whether it works.

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

ipekum
New Member
12 0 0

Just updated the code and unfortunately it doesn't seem to be fixing the problem 😞

The toggle icons are now further to the categories and they're still not clickable, redirecting to the main category

By the way, I have some .liquid files including <i class="fa fa-bars dropdown-toggle icon"></i>  which are "mainmenu.mobile", "header.liquid" and mainmenu-mobile.liquid 

Should I try your code on them?

diego_ezfy
Shopify Partner
2935 562 883

Send me a screenshot of where you pasted the code plz

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

ipekum
New Member
12 0 0

Screen Shot 2020-08-16 at 05.54.27.png

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

There is a typo in my code, sorry, please replace all code with this:


<script>
function mobileFix(){

    var a = document.querySelectorAll(`.has-child .site-nav-link`);

    if (!a){
        return;
    }
    for (var each of a){
    each.addEventListener('click',function(el){
    el.preventDefault();
    el.target.classList.toggle('show--dropdown');
    });
    }
}

mobileFix();
</script>

<style>
@media (max-width:767px){
    .header .nou_megamenu{
    width: 100% !important; 
}
.show--dropdown + .sub-menu-dropdown{
    display: block !important;
}
}
</style>
◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

ipekum
New Member
12 0 0

Oh yes! Now the dropdown works only when clicked on the blank space between the main category and the toggle icon.

It's now not connected to my toggle icon right? Is there any way to make it work with the icon? 

And thank you soo much for your effort and time! 🙂

 

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@ipekum 

It would require a more complex custom code, if it's of your interest I'm available for hire and would be happy to help. 

Kindly click on "accept as solution" and "like" to help other people in the community with similar issues,


Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

ipekum
New Member
12 0 0

Oh I see of course, we will definitely consider it.

Thank you so much again for your help! 

 

 

diego_ezfy
Shopify Partner
2935 562 883

Anytime! Wishing you a great weekend.

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

dreamer22
Visitor
1 0 0

Hello Diego! Good day.  I desperately need your help sorting out a problem. My websites main menu only displays when selected on a desktop but does not display when selected on a mobile device.

I would really appreciate you looking at it and helping with a solution. 
 I really hope to hear back from you soon. Thank you 
 

 

MiamiMango
Visitor
1 0 0

Hi , im having the same issue in Debut theme , I used the modified code and still nothing.

the dropdown menu simply wont open to see the navigation pages 

Any suggestionsCapture.PNG

 

DonMonto
Visitor
3 0 0

Hi, I have a similar problem on the page: https://www.yourpocketboo.com/ dropdown menu does not work in the mobile version. When I scroll on the page, up and down it doesn't click on the menu or close it. Can you help me?

kitandcaboodle
Visitor
1 0 0

Hello, the mobile link to my drop down menu no longer works. Please help! Thank you.