Debut Theme Clickable Top Level Menu Item With Link + sub level links on hoovering

islnd
Tourist
8 0 1

Earlier this year there was a thread explaining how to achieve a Top Level Menu Item With Link (https://community.shopify.com/c/Shopify-Design/Debut-Theme-Top-Level-Menu-Item-With-Link/td-p/493572) and it seems that some developers were able to make it work by adjusting:

1) theme.scss.liquid

2) site-nav.liquid

3) theme.js

Unfortunately it looks like the theme.js of the Debut theme has changed over the recent months as I cannot find the code that needs to be commented out.

/*
cache.$parents.on('click.siteNav', function() {
var $el = $(this);
$el.hasClass(config.activeClass) ? hideDropdown($el) : showDropdown($el);
});
*/
 
I have been trying to find which part of the current theme.js code has to be amended but I cannot identify it. I would be grateful if someone could point me in the right direction. Many thanks,
Jurgen

 

 

 

0 Likes
Skoory
Pathfinder
115 1 44

@islnd 

(and cc to @KetanKumar

It seems to work if you follow the instructions about edits to site-nav.liquid and theme.scss -- and in theme.js change just one word: go to line 2927 and change 'false' to 'true'. It will look like this:  .setAttribute('aria-expanded', 'true');

But there is a little problem: the chevron is no longer visible and the menu shifts from one mode to another very quickly. Can anyone help regarding this? Otherwise it seems to work on mobile and desktop, but our menu has only two levels so can't tell for larger menus.

Would you kindly let me know if it's working for you too? Maybe Ketan can fix the small issue of menu not staying visible for long?

Skoory, the curious squirrel of TTL CIC - - a Company limited by guarantee with charitable objectives.
"Finally, if you quote a source, choose one with a name that is easy to pronounce...mental effort is aversive." Thinking Fast and Slow
KetanKumar
Shopify Partner
20651 2142 7820

@Skoory 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

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
0 Likes
Skoory
Pathfinder
115 1 44

@KetanKumar  Thank you, Ketan.  I think it works fine now. See it here www.ttlcic.org.uk - but the way we fixed it is slightly different from the way described in the previous post above: we did not change anything in the theme.js file - just edited the snippet and added code to theme.css -  and it seems to work fine for two levels. The chevron has a bit too much space on the left perhaps for some tastes?

 

Skoory, the curious squirrel of TTL CIC - - a Company limited by guarantee with charitable objectives.
"Finally, if you quote a source, choose one with a name that is easy to pronounce...mental effort is aversive." Thinking Fast and Slow