Hover effect on main navigation bar links with small logo

Solved
picktook
New Member
3 0 0

i am using debut theme. i want to add hover effect to my nav bar links . i want that when someone hover on nav bar link a small logo appear with that nav link. Like in this a heart logo appears on nav links when hovered. https://www2.splashfashions.com/pk/en/women-gcc , my website is endbag.com

Accepted Solutions (2)

Accepted Solutions
Pallavi
Shopify Expert
2458 411 532

This is an accepted solution.

Hello Picktook,

 

Please add this css 

li.site-nav--has-dropdown:hover {
    background: url(https://cdn.shopify.com/s/files/1/0326/5350/8746/files/Current_Logo_300x300.jpg?v=1583091628) no-repeat left;
    background-size: 8%;
}

You need to change the URL of the image. 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Pallavi
Shopify Expert
2458 411 532

This is an accepted solution.

Hello Picktook,

 

Please add below given css

li a.site-nav__link.site-nav__child-link:hover {
    background: url(https://cdn.shopify.com/s/files/1/0326/5350/8746/files/Current_Logo_300x300.jpg?v=1583091628) no-repeat left;
    background-size: 8%;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 4 (4)
Pallavi
Shopify Expert
2458 411 532

This is an accepted solution.

Hello Picktook,

 

Please add this css 

li.site-nav--has-dropdown:hover {
    background: url(https://cdn.shopify.com/s/files/1/0326/5350/8746/files/Current_Logo_300x300.jpg?v=1583091628) no-repeat left;
    background-size: 8%;
}

You need to change the URL of the image. 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

picktook
New Member
3 0 0

Thank you very much. I tried it and it showed on my main categories but not subcategories. how to show also on subcategories? 

Pallavi
Shopify Expert
2458 411 532

This is an accepted solution.

Hello Picktook,

 

Please add below given css

li a.site-nav__link.site-nav__child-link:hover {
    background: url(https://cdn.shopify.com/s/files/1/0326/5350/8746/files/Current_Logo_300x300.jpg?v=1583091628) no-repeat left;
    background-size: 8%;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Jasoneng
New Member
1 0 0

 

Hi there, I am currently working on a project for The Continents States University and I have experienced the issue. Luckily I was able to use code and it resolved my issue.

.footer-logo span {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    max-width: 0;
    background: #fff;
    opacity: 0.4;
    filter: alpha(opacity=40);
    -webkit-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}