How to add hover to show dropdown in navigation menu from Ira theme?

Solved
mharis
Visitor
3 0 2

Hi,

Could you please show me how do I change the code for the navigation menu so that the dropdown shows on hover instead of clicking.

 

Theme: Ira Paid theme.

Accepted Solutions (2)
KetanKumar
Shopify Partner
36719 3634 11911

This is an accepted solution.

@mharis 

thanks for url can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/index.css ->paste the below code at the bottom of the file.

html:not(.no-js) .navigation__submenu {
background-color: var(--color-background-header);
top: 45px;
}
.header__links-list li:hover ul.navigation__submenu.fs-body-base {
    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

oscprofessional
Shopify Partner
15736 2353 3050

This is an accepted solution.

Hi @mharis 

Please add the following code in index.css file

1)Go to Online store> Theme >Edit code
2)Asset> index.css

.header__links-list li:hover .navigation__submenu {
    display: block;
}

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 6 (6)
KetanKumar
Shopify Partner
36719 3634 11911

@mharis 


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
KetanKumar
Shopify Partner
36719 3634 11911

This is an accepted solution.

@mharis 

thanks for url can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/index.css ->paste the below code at the bottom of the file.

html:not(.no-js) .navigation__submenu {
background-color: var(--color-background-header);
top: 45px;
}
.header__links-list li:hover ul.navigation__submenu.fs-body-base {
    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
oscprofessional
Shopify Partner
15736 2353 3050

This is an accepted solution.

Hi @mharis 

Please add the following code in index.css file

1)Go to Online store> Theme >Edit code
2)Asset> index.css

.header__links-list li:hover .navigation__submenu {
    display: block;
}

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
blaquephoenixcr
Visitor
3 0 0

Hey Ketan, would you know the fix for the Sense theme?

blaquephoenixcr
Visitor
3 0 0

Hi, I actually found it. To anyone else with the same issue can review the link as it works for Sense as well. Solved: Dawn Theme - How to add the ability to hover over dropdown in navigation menu without clic.....