Shopify themes, liquid, logos, and UX
Currently on my main navigation menu, you have to click each menu to open the drop down to find further pages.
Is there a way to open/preview the menus when you hover over them rather than having to click each menu to open the dropdowns?
hope that makes sense!
Solved! Go to the solution
This is an accepted solution.
Hi @Dulciedreams1,
Please go to Actions > Edit code > theme.liquid file. Open theme.liquid file, copy and paste this code below before </body> element and save the file:
<script>
const inlineMenu = document.querySelector(".header__inline-menu");
const detailsItems = inlineMenu.querySelectorAll("details");
detailsItems.forEach(item => {
const ulElement = item.querySelector("ul");
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
ulElement.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
});
</script>
This is an accepted solution.
Hi @Dulciedreams1,
Please go to Actions > Edit code > theme.liquid file. Open theme.liquid file, copy and paste this code below before </body> element and save the file:
<script>
const inlineMenu = document.querySelector(".header__inline-menu");
const detailsItems = inlineMenu.querySelectorAll("details");
detailsItems.forEach(item => {
const ulElement = item.querySelector("ul");
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
ulElement.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
});
</script>
Thankyou so much!
Hi @Dulciedreams1,
If you have any questions, you can contact me directly.
Nice to meet you 😊
Hello sir I need your help , I'm facing a problem in tablet and mobile view , when I click the gurger icon a white transaprant backaground aprears instead of the menu , help me please to solve it
here it is my website I used dawn them : https://www.cozmic.me/
Hi @hiba665,
I checked and it shows fine, did you solve it?
Thank you so much , the problem was in the code I ensert it to make the website from RTF when arabic language is selected , I found the solution here : https://community.shopify.com/c/shopify-design/hamburger-menu-on-mobile-isn-t-working/m-p/2626283
Hi @hiba665,
Congratulation!
If you have any questions, you can contact me directly.
Nice to meet you 😊
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025