Shopify themes, liquid, logos, and UX
Hi, like it says I'm using the free debut theme and wondering if someone can help me with some code to make the drop down, for my main nav menu, display when hovered over and link when clicked. Currently the link function is not working when clicked (i.e. I have Products>[product category] Clicking Products activates the drop down but I want it to link to my product catalog).
my website is www.Crass-Cat.com/
Password: euwome
Solved! Go to the solution
This is an accepted solution.
Thanks for the post can you please try this.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file.
.site-nav--has-dropdown:hover .site-nav__dropdown {
display: block;
}
This is an accepted solution.
Thanks, it
.site-nav__dropdown {top: 20px;}
This is an accepted solution.
Thanks for the post can you please try this.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file.
.site-nav--has-dropdown:hover .site-nav__dropdown {
display: block;
}
Thank you so much that worked for displaying the drop down on hover! Is it possible to make the top item of the drop down menu link to my all products page like it's supposed to? I have it set up to do so in the navigation section but when clicked it retracts the drop down.
Also the above code activates the dropdown on hover but when you move the mouse to try to click a menu item the menu disappears, so can you make it stay open? Thank you so much for your help so far!
This is an accepted solution.
Thanks, it
.site-nav__dropdown {top: 20px;}
That works for keeping the menu open thank you so much!! Sorry if it is difficult but the only problem is that the top item of the menu is not a link you can click it only opens and closes the menu. Can it still display on hover but link to the page when clicked? thank you for your hard work on this!!
Yes, it can be done some custom code
Ok are you saying this is something you charge for or just need some time?
@KetanKumar wrote:Yes, it can be done some custom code
Did you ever figure this out? I am trying to accomplish the same thing with my site and the parent menu item is not clickable. I have tried everything to turn off double clicking but I can't find the code in the .css asset file that people talk about.
Hey Scott,
Don't know if your problem was solved, but I had the same problem as you and this is solution that I found on another shopify community post.
Solution to Header Menu Item link to work along with Drop down menu hover effect.
a) This should get the page link to work when you click on the Header Menu item (Top level menu item).
I was able to modify the code to implement it.
(Debut theme)
1. Go to Online Store ->Theme ->Edit code
2. Snippets ->/site-nav.liquid ->paste below code at the bottom of the file.
Look for the following code fragment (around line 26):
{% if link.links != blank %}
<li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}">
<button class="site-nav__link site-nav__link--main site-nav__link--button{% if link.child_active %} site-nav__link--active{% endif %}" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
<span class="site-nav__label">{{ link.title }}</span>{% include 'icon-chevron-down' %}
</button>
Replace the <button></button> element with the following:
<a href="{{ link.url }}" class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}">
<span class="site-nav__label">{{ link.title }}</span>
</a>
b) Drop down menu hover effect:
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file.
.site-nav--has-dropdown:hover .site-nav__dropdown {
display: block;
}
.site-nav__dropdown {top: 25px;}
This is an old post, but wondering if anyone knows how to do this for Sense theme?
Thanks!
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
do you have like this?
yes, the dropdown on hover works great I would just like for the hotlink to work when I click the menu item. Currently when I double click the menu item it just forces the dropdown to stay open rather than link to the page that I have it linked to go to.
Under assets section, I cant see theme.css
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024