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

GLL2024 · ‎10-13-2024

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: left of text:

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

Password: mitten

Dan-From-Ryviu · ‎10-13-2024

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>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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

AnneLuo · ‎10-13-2024

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 · ‎10-13-2024

@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 · ‎10-13-2024

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>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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 · ‎10-13-2024

@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 · ‎10-13-2024

Yeah, it only appear on hover menu item

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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 · ‎10-13-2024

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 · ‎10-16-2024

This worked perfectly - thank you so much!!

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

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

Buy Me A Coffee ☕

Community Blog Articles