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 😊
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024