Hover Dropdown Shopify Dawn Theme Pt. 2 - Making Title Menu Items Clickable
Вставка
- Опубліковано 8 лют 2025
- WATCH THE UPDATED VERSION OF THIS VIDEO [2024]: • Hoverable Drop Down Me...
Part 1: • Add Hover Effect to He...
In this video, I cover how to make our main menu items clickable after implementing our hover dropdown in Shopify’s dawn theme.
Link to code: pastebin.com/Z...
My Latest Shopify Tips & Tricks: wmiz.github.io...
Connect with me: / will-misback
Don't @ me: / ecomoverlord
Email me: me@willmisback.com
Timestamps:
0:00 Intro
0:45 Coding Commences
6:17 Feature Demo & Wrapup
![How To Center The Header Menu in Shopify [Dawn Theme]](http://i.ytimg.com/vi/A4OOr7nPR2M/mqdefault.jpg)
My Latest Shopify Tips & Tricks: wmiz.github.io/mastering-shopify
Link to Part 1: ua-cam.com/video/-oz3hgI09bk/v-deo.html
Code to copy:
Line 350: {{ link.title | escape }}
{% render 'icon-caret' %}
Line 363: {{ childlink.title | escape }}
{% render 'icon-caret' %}
Dude, you're awesome. Literally saved my day.
Glad it helped!
@@WillMisback Merry Christmas!
@@gadgetthing Merry Christmas to you as well!
another great video. thanks will!
Thanks nitro!
Thanks so much Will, love your work and appreciate how easy you make it to integrate 🙏
Hi Rob, thanks for letting me know. Made my day!
Will, how easy is it to make the announcement bar a multi in Dawn? I.e. 3 or 4 messages playing in a sequence 5sec each?
Solid tips! Appreciate the videos and effort
Glad you like them!
Thanks so much for this - worked perfectly!
thank you so much for sharing this video. it helped a lot
Glad it helped!
Thank you so much you're the best man !!!!
No you're the best Lawrence
Thank you so much for the tutorial!
Glad it helped!
Thanks man
No problem!
Thank you so much for this!
Glad it was helpful!
Let me know if you have any trouble implementing this tutorial. Which features should I cover next?
On the Dawn Theme, could you create a tutorial on how to code in a "notify back in stock" feature so customers can be emailed when out of stock items come back in stock. Would that be possible?
Side bar on left side to filter by price or brands or smthing similar. Thank you.
amazing.. much apreciated
Glad it helped
Thank you so much for this!!!
Glad it helped!
Bro can you put a Tips/Donation link on your video description. I bet people will appreciate your effort. regards.
I've tried this but looks like Dawn has had some updates.. Anyone know if this code has to be amended to work now? I pasted the exact code as per the video and the code in paste bin
Thank you so much!
Thanks!
good tutorial but it does not work on mobile. how to modify the code to make it work on mobile please
Great Videos, unfortunately the code doesn't work. The first dropdown menu is fine but when you move the cursor down to the next dropdown menu it won't let you click, it just comes off the menu. Any ideas?
You might already know this. Under Catalog 1 -> Item 1 - You don't have a sub-menu. Instead, you have a sub-menu for Item 2. If you had a sub-menu under Item 1, the hoawer dropdown will auto close as soon as you hoawer past the Item 1 sub-menu and won't let you go to Item 2. Is there a fix for this?
Good catch Arun, unfortunately with the dropdown being below the item in Dawn there isn't really an elegant way to solve this issue because after you mouse below the item the mouse may not be hovering on the menu element. Let me know if that makes sense or you have any suggestions for how to solve this.
@@WillMisback Hi Will, thank you very much for this tutorial. I have also noticed that. The only think that the user can do is to click on item 1 so the submenu under item 2 opens.
I do need this fix too. I realised that if I hover really quick it will open item 2 menu. But user will not be able to open this if they are shopping. Do you have a fix for this?
@@WillMisback change the margin to 0 for ".header__submenu .header__submenu" line - 2653 in base.css your problem will be solved
@@mhforhad4257 This doesn't seem to be working for me :( Same problem, any expandable menu items after the first are still not accessible... the menu snaps shut
Thank you for the tutorial , it's really helpful , is it possible to make a tutorial for making a mega menu with Pictures on Dawn Theme
Any requests for specific features in the mega menu?
Thank you Will,
but when I'm hovering on the menu i dropdown isn't keeping it's state it just fades when i go away from the main menu
(MEGAMENU_
LOVE IT!!!! Thank you so much!!!
Glad to help Big Thinkers Network!
what about for mobile? also thanks this video help a lot
Hi Will, thanks very much for tutorials, they are very helpful! Is there a way to have the submenu pop out horizontally to the right hand side in another column (rather than dropdown vertically in the same column)?
Hi Mylily, thanks for your comment. I'm going to look into this and get back to you as soon as I can!
@@WillMisback that would be super useful!
@@WillMisback That is something Im looking to do too, it will be awesome!
@Will Misback - Shopify Developer This would be super helpful. Have been looking for this solution too! Please make a tutorial on this if possible. Thanks in advance :)
Hello sir, it's working on desktop computer, but not working in mobile phone. May I know that, do you have any solution for that. Please let me know.
When i add more sub categories under subcategory it doesn’t work ??
How to add category option for all sub - category and sub-sub category in Dawn theme.
How to remove vendor name / shipping calculated at end?
Please, make a video on it .
Hi Praveen, as you probably know, by default Dawn hasn't provided us with the elements to achieve this. This is possible but would require us to build these elements. I'm not sure I understand your second request very well. Are you referring to the cart page or checkout?
@@WillMisback Yes Sir, I did it myself. By hiring Mohamad Ramzan Sir on UA-cam. He helped me.
I tried implementing your code but the problem that I have is that the category link (child) in the dropdown menu does not open the category page. Instead it closes the (grandchild) dropdown (when I click it) which had previously opened on hover (on the child).
I'm trying to do this with the "Taste" theme. I know the lines will be different, but will it work? Having problems :/
Hey Will. Super helpful tutorial! Thanks for putting that up. It works perfectly on all browsers except for safari. I was wandering if there is another piece of code I have to write? The main menu link is unclickable and the drop down does not appear on hover ( only on safari)
Hmm, I'll look into this. Desktop safari can be pesky sometimes
Hey Will, any luck on this?
Hi - Great tutorial, followed all steps and it's worked. I just wondered how you get the title menus clickable on mobile? Thanks.
Hi Carina, this isn't really possible on mobile because if the title menus were clickable then there would be no way to access their sub menus as there isn't really hover functionality on mobile
@@WillMisback Hi Will sorry, I don't think you've understood what I mean. So on laptop/desktop you hover over the main title and my drop downs show which is perfect and when you click on that main title (shop) all my collections show on a page - which again is great.
On mobile though, you click on the main title (shop) and then it drops down to show you more. I'd like the actual main title clickable rather than clicking to show the drop down. 🙂
Does that make sense? Is that doable? thanks.
Hi Will, I copied and implemented your steps but my dropdown menu doesnt click to anything. Can you please help?
Hey BroZ Gaming. It's hard for me to debug over YT comments, but your best bet would be to open up your browser's dev tools & see if any errors are being thrown or if the links are hooking up properly.
can you show us how to create a mega menu in dawn?
Hi Danielle, I'll take a look at doing this and get back to you!
@@WillMisback It would be extremely helpful!
Very strange, title menu didn't work for me, still unclickable. But the sub menu title(childlink) worked... any idea why?
Hi Crystal, make sure you remembered to link something to that element in the Shopify navigation settings. Other than that maybe try the tutorial again from the duplicate you made. Sorry, it's hard to troubleshoot over YT comments sometimes.
thank you for this solution it's great. I just want to mention you that I tried and it work great in brave browser but it won't work in safari. would you happen to know why is that???
I do have the same problem...anyone with solution? Nonetheless, thanks for the video!
Hi, Will thank you for this. Can you somehow show how this will work thru phones? I would like it to be clickable too. bc this only works for laptop and tablets
Hi Suwannee, hover dropdown menu's don't really make sense to implement on a touch device as there is no cursor to hover. Hope that helps!
can you do also mega menu ? Thanks
Yes, we would love to have this feature for the mega menu
hm, the names of my main catogories just doubled. thats weird. Its like in your case it would say "Catalog1Catalog1" and "Catalog2Catalog2". Any idea why or what i've done wrong? It seemed so easy, ughs!
Hi Anika! You may have accidentally copied and pasted one of the tags in header.liquid.
Hi, thanks for your video.
How do I make the "grandchildlink" underlined when selected? (in your video "item 3" or "about" menu)
Thanks
M
Hi Mauro, follow similar steps to both the links & childlinks, replacing the relevan variable in the code with grandchildlink instead.
Hey Will! Thank so much for this. Super easily to follow and understand.
I have one question: I removed the caret entirely for a cleaner look and now the menu item that has the dropdown isn't centered within its padding. I can't seem to figure out how to fix this. Is there a way to add "text-align: inherit" to your code perhaps? Super new to this so any help is appreciated :)
Fixed it myself!
For anyone with the same issue:
header.liquid around line 68.
Padding-right did not match the padding on the rest of the menu list items. I had to switch mine to 1.2rem.
Hi, I've just started to use the Dawn theme. My problem is my dropdown menu is too long. Do you have any options for the menu to flare out to the left and right and show multi columns rather than 1 long list?
Hi Atturina, a feature like this would require some additional coding that goes beyond the difficulty level of most of my tutorials.
This was great. I just recently implemented Dawn as my new theme. I just was wondering if this could also be done for mobile as well though? I used to have minimal and I believe it auto made a clickable child in the drop down labeled like "All Clothing" or "all tops" But unfortunately dawn doesn't do that. I love this theme but there is a few functions they left out of it.
Hi Kenzy, this would be doable but would require adding a togglable line to your theme's header.liquid file. eg. {% liquid schema toggle %} All {{collection.title}} {% end liquid schema toggle %}. I'd be happy to code it for you if you would like: willmiswebdev@gmail.com
Does it work with Dawn OS 2.0 version?
This tutorial should work for OS 2.0
Hi, great video, but where is the code? Can you please post it?
Hi Charif, I posted the code in a comment. Can you let me know if you can see it? Otherwise, I will post a link to it in the description.
Line 350: {{ link.title | escape }}
{% render 'icon-caret' %}
Line 363: {{ childlink.title | escape }}
{% render 'icon-caret' %}
@@WillMisback Nope, can't see it nowhere
@@charif9447 Thanks for letting me know, check the description now. There should be a pastebin link
@@charif9447 pastebin.com/ZRTcVdG2
your coding explanation really confused a non programmer like me. When you copy and paste and I couldn't see shit.
Great content! Feedback: Music way to loud ;-)
Noted!