Solved

Nav menu to activate on hover and link on click (debut theme)

ScottH2
Tourist
9 0 2

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

Accepted Solutions (2)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@ScottH2 

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;
} 

 

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@ScottH2 

Thanks, it 

.site-nav__dropdown {top: 20px;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 17 (17)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@ScottH2 

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;
} 

 

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ScottH2
Tourist
9 0 2

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.

ScottH2
Tourist
9 0 2

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!

ScottH2
Tourist
9 0 2

sorry for multiple replies but I changed my password.

www.crass-cat.com

password: unDisputed

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@ScottH2 

Thanks, it 

.site-nav__dropdown {top: 20px;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ScottH2
Tourist
9 0 2

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!!

KetanKumar
Shopify Partner
36839 3635 11972

@ScottH2 

Yes, it can be done some custom code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ScottH2
Tourist
9 0 2

Ok are you saying this is something you charge for or just need some time? 


@KetanKumar wrote:

@ScottH2 

Yes, it can be done some custom code 


 

DGBdiscs
Tourist
4 0 3

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. 

ScottH2
Tourist
9 0 2
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 {top: 20px;}
Boardhaven
Tourist
9 0 3

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;}

puckvintage
New Member
4 0 0

This is an old post, but wondering if anyone knows how to do this for Sense theme? 

 

Thanks!

KetanKumar
Shopify Partner
36839 3635 11972

@DGBdiscs 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DGBdiscs
Tourist
4 0 3

@KetanKumar  dgbdiscs.com

KetanKumar
Shopify Partner
36839 3635 11972

@DGBdiscs 

do you have like this?

KetanKumar_0-1624452192804.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DGBdiscs
Tourist
4 0 3

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. 

earthasana
Visitor
2 0 0

Under assets section, I cant see theme.css