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 & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...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.

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

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 & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Guleria · ‎10-13-2024

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

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

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

Yeah, it only appear on hover menu item

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Guleria · ‎10-13-2024

ohh yes there is opacity

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

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