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:
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.
(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?
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.
@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?