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

Solved
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)

Accepted Solutions
diego_ezfy
Shopify Partner
2355 425 565

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>
◦ Add a Slideshow to the Dawn theme: live preview. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
◦ Available for hire! ezfycode@gmail.com

View solution in original post

diego_ezfy
Shopify Partner
2355 425 565

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

◦ Add a Slideshow to the Dawn theme: live preview. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
◦ Available for hire! ezfycode@gmail.com

View solution in original post

Replies 16 (16)
Wahab_Ahmad
Shopify Partner
729 113 180

Hello @ipekum, share store link for troubleshooting problem 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
Shopify Custom Theme Development and Design | Custom Modifications In to Shopify Theme

- Feel free to contact me
Mail : wahabahmadghori@gmail.com | Skype : live:17296c31bc2edbdf
ipekum
New Member
12 0 0
diego_ezfy
Shopify Partner
2355 425 565

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

◦ Add a Slideshow to the Dawn theme: live preview. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
◦ Available for hire! ezfycode@gmail.com
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
2355 425 565

@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.

◦ Add a Slideshow to the Dawn theme: live preview. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
◦ Available for hire! ezfycode@gmail.com
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
2355 425 565

Send me a screenshot of where you pasted the code plz

◦ Add a Slideshow to the Dawn theme: live preview. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
◦ Available for hire! ezfycode@gmail.com
ipekum
New Member
12 0 0
diego_ezfy
Shopify Partner
2355 425 565

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>
◦ Add a Slideshow to the Dawn theme: live preview. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
◦ Available for hire! ezfycode@gmail.com

View solution in original post