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

Solved
mharis
New Member
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)

Accepted Solutions
KetanKumar
Shopify Partner
24919 2497 9033

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
9167 1561 1925

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

 

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Replies 4 (4)
KetanKumar
Shopify Partner
24919 2497 9033

@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
24919 2497 9033

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
9167 1561 1925

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

 

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post