Dropdown on mobile not working Supply theme

Solved
Parmegastore
Tourist
11 1 0

Hi, so in short my mobile nav dropdowns are broken in my supply theme, When i inspect the elements it seems like the button and list classes are not being updated with nav-active but even formatting the classes manually in the element inspector it still doesnt show the dropdown, ive looked at another standard supply theme and everything seems to be the same in all the .liquid files but i cant find the js that adds nav-active to the class of the button and list item. Why is this breaking ? and where is this js ?

The only code ive changed is the main nav display so i can have a double layer menu, show hide tags section and some ads and analytics tags

https://parmegastore.com/

Theme: Supply

Accepted Solution (1)

Accepted Solutions
Parmegastore
Tourist
11 1 0

This is an accepted solution.

Allright i figured it out, I wanted to make my desktop nav a double layer and followed this advice. 

https://community.shopify.com/c/Shopify-Design/Supply-theme-larger-navbar-and-or-second-row/td-p/444...

but there is a catch you have to keep this code.

timber.responsiveNav = function () {

timber.alignMenu();
timber.accessibleNav();
timber.mobileNav();
};

 

it seems like those timber. functions are important for the mobile nav dropdowns

Its been 6 the strange thing is i made this change 6 months ago and didnt have any problems, it must be that whoever has the timber repo made some changes.

View solution in original post

Replies 11 (11)
KetanKumar
Shopify Partner
24945 2501 9043

@Parmegastore 

sorry for that issue do you have add any apps and third part code? if yes can you try to disable and check?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Parmegastore
Tourist
11 1 0

No Luck sorry

Parmegastore
Tourist
11 1 0

This is an accepted solution.

Allright i figured it out, I wanted to make my desktop nav a double layer and followed this advice. 

https://community.shopify.com/c/Shopify-Design/Supply-theme-larger-navbar-and-or-second-row/td-p/444...

but there is a catch you have to keep this code.

timber.responsiveNav = function () {

timber.alignMenu();
timber.accessibleNav();
timber.mobileNav();
};

 

it seems like those timber. functions are important for the mobile nav dropdowns

Its been 6 the strange thing is i made this change 6 months ago and didnt have any problems, it must be that whoever has the timber repo made some changes.

View solution in original post

DeeVinyl
Tourist
3 0 3

My mobile menu has also stopped working since I expanded the menu bar to 2 rows. The code that you kept, did you put it above the expansion code? 

www.dee-vinyl.com

KetanKumar
Shopify Partner
24945 2501 9043

@DeeVinyl 

can you please check origanl theme code Supply theme

also do you have added any app or code?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DeeVinyl
Tourist
3 0 3

This started after I added code to expand the menu bar to 2 lines instead of having the “More” drop down at the end. 

I’m wondering if adding the code mentioned above would reactivate the drop downs in the mobile menu. The desktop menu works fine. 

if that code would work, where do I need to put it? I can sent a screenshot if that would help. 

KetanKumar
Shopify Partner
24945 2501 9043

@DeeVinyl 

can you please revert your last change in header after chekck

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DeeVinyl
Tourist
3 0 3

I reverted the change. The mobile menu works again. However, the desktop menu is one line again. Is there a way to have more than one line on the desktop menu and have the mobile menu drop downs work?

KetanKumar
Shopify Partner
24945 2501 9043

@DeeVinyl 

yes but its proper UI/UX don't show all bcz your header to much  big if you have do this 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing