Add an icon to appear on hover over the links in the navigation pane

Solved

Add an icon to appear on hover over the links in the navigation pane

GLL2024
Tourist
5 0 2

Looking to add these star icons to the left and right of links in the menu/navigation pane when the page link is hovered over (see mockup below).

Star icon .pngs: right of text:Stars Right.png  left of text:Stars Left.png

Website: https://6af6dc-42.myshopify.com/ 

Password: mitten

 

Great Lakes Littles Branding Homepage2.jpg

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10030 1998 2043

This is an accepted solution.

Hi @GLL2024 

You can add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code 

<style>
.list-menu__item:before,
.list-menu__item:after {
    content: '';
    width: 20px;
    height: 20px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    opacity: 0;
}
.list-menu__item:after {
    background: url(https://community.shopify.com/c/image/serverpage/image-id/518133i9FCFB7236FEEBBD1/image-size/large?v=v2&px=999);
}
.list-menu__item:before {
    background: url(https://community.shopify.com/c/image/serverpage/image-id/518134iCF71093009155FF3/image-size/large?v=v2&px=999);
}
.list-menu__item:hover:before,
.list-menu__item:hover:after {
opacity: 1 !important;
}
</style>

Screenshot 2024-10-14 at 09.45.25.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 7 (7)

AnneLuo
Shopify Partner
1031 196 219

Hi, @GLL2024 

I can help you with it. But it needs to add some custom code. If you need my help, please let me know.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

Guleria
Shopify Partner
3501 700 982

@GLL2024 ,

 

Yes possible but not without customization.

 

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL

Dan-From-Ryviu
Shopify Partner
10030 1998 2043

This is an accepted solution.

Hi @GLL2024 

You can add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code 

<style>
.list-menu__item:before,
.list-menu__item:after {
    content: '';
    width: 20px;
    height: 20px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    opacity: 0;
}
.list-menu__item:after {
    background: url(https://community.shopify.com/c/image/serverpage/image-id/518133i9FCFB7236FEEBBD1/image-size/large?v=v2&px=999);
}
.list-menu__item:before {
    background: url(https://community.shopify.com/c/image/serverpage/image-id/518134iCF71093009155FF3/image-size/large?v=v2&px=999);
}
.list-menu__item:hover:before,
.list-menu__item:hover:after {
opacity: 1 !important;
}
</style>

Screenshot 2024-10-14 at 09.45.25.png

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Guleria
Shopify Partner
3501 700 982

@Dan-From-Ryviu 
Need it, on hover. 

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
Dan-From-Ryviu
Shopify Partner
10030 1998 2043

Yeah, it only appear on hover menu item

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Guleria
Shopify Partner
3501 700 982

ohh yes there is opacity 

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
GLL2024
Tourist
5 0 2

This worked perfectly - thank you so much!!