Solved

Adding icons in Dropdown Menu/Navigation Menu

imfamousrajat
Excursionist
14 1 0

Hi all,

I have been trying to add icons to my dropdown menu and been unable to do so. (Screenshot attached for reference). I do not want to use any apps, and I am using the default Dawn theme.

This is how I want my menu to look like 👇

imfamousrajat_0-1707893619015.png

 

The screenshot is from the store Vanbruun, whose thread I initially looked up to resolve my issue. I could grasp the gist that it can be done via Meta objects and Meta fields. However, I am unable to achieve the desired result.


I tried searching for tutorials on Google and YouTube but no one has explained about this. I would be really grateful if someone could help me with this. Thanks for your time. 🙏

Storeamorella.in
Password: eaffew

Store - www.amorella.in
Accepted Solutions (3)

TerenceKEANE
Shopify Partner
137 33 28

This is an accepted solution.

Hello,

 

Of course, there's a manual way to do this. It might be a bit cumbersome, but you can easily achieve it with the following approach. Here, what you need to know is that each dropdown menu has its own 'id' value. Besides the initial code below, for example, I first applied 'position: relative' to the link you referred to as 'anklets', and then used 'absolute' to display them on the left side. You can see the 'id' part of these links by right-clicking and selecting 'inspect' when you hover over them with your mouse. I'm not sure if you have access to such an inspection from the admin panel. In short, once you've learned the 'id' parts of these menus, you can easily add an icon to the desired menu using the method below. If you're unable to do so.

 

Best regards,

 

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

 

Screenshot 2024-02-14 145041.png

 

ul#HeaderMenu-MenuList-2 > li {
    padding-left: 30px;
}


#HeaderMenu-categories-anklets {
  position: relative;
}

#HeaderMenu-categories-anklets::before {
  content: '';
  position: absolute;
  left: -20px; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 24px; 
  height: 24px; 
  background-image: url('https://uxwing.com/wp-content/themes/uxwing/download/clothes-and-accessories/diamond-gem-icon.png'); 
  background-size: cover; 
   background-size: contain;
   background-repeat: no-repeat;
}

 

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The Coffee  would be the anchor keeping me steady!
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
★ https://novajetsoft.com --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD!

View solution in original post

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

Hey @imfamousrajat there are no ids mentions in the elements of footer. you need to add it based on the URL parameters. I can show you the example for Anklets. 

 

1. Click on the Anklets and copy url parameter last part : https://prnt.sc/OqE99wgboYTM for example = /collections/anklets.

2. create a css code for each individuals. 

 

 

.footer-block__details-content ul li a[href="/collections/anklets"]::before {
    content: "";
    position: absolute;
    background-image: url(https://www.svgrepo.com/show/250331/bracelet.svg);
    width: 18px;
    height: 30px;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    top: 8px;
}
.footer-block__details-content ul li a{
   padding-left: 20px;
}
.footer-block__details-content ul li {
  position: relative;
}

 

 

please change the url parameter and image url in each individuals. 

 

Thanks,

Zeel

 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

View solution in original post

imfamousrajat
Excursionist
14 1 0

This is an accepted solution.

Thanks a lot. It seems to be working now. 
 
However, there is a minor issue with the positioning of the icons.
- Do you think there is a better way to set the vertical position of the icons, without using the "Top" property?
- Is it possible to display the icons in the same block as the text, so that they properly align? Example: Block [Icon - Anklets]

In the image attached, I have used Top: 13%; for the first icon and Top: 23%; for the second once.

Screenshot 2024-02-14 at 6.09.15 PM.png 

.footer-block__details-content ul li {
position: relative;
display: flex;
align-items: center;
}

.footer-block__details-content ul li a {
padding-left: 20px;
}

.footer-block__details-content a[href="/collections/anklets"]::before {
content: "";
position: absolute;
background-image: url(https://www.svgrepo.com/show/250331/bracelet.svg);
width: 20px;
height: 20px;
left: -28px;
top: 13%;
background-size: contain;
background-repeat: no-repeat;
}


Thanks again for all the help. I really appreciate your time. 

Store - www.amorella.in

View solution in original post

Replies 20 (20)

Zeel-prajapatii
Shopify Partner
138 32 27

Hey @imfamousrajat do you want to set images here. please refer the screenshots.

 

Zeelprajapatii_0-1707895624119.png

 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
imfamousrajat
Excursionist
14 1 0

Hello, thanks for the reply. I want to add image icons to the top navigation menu in the header.

Adding the images to the footer menu like you suggested would also be a great add-on. 🙂

Screenshot 2024-02-14 at 1.07.19 PM.png

 

Store - www.amorella.in
Zeel-prajapatii
Shopify Partner
138 32 27

@imfamousrajat 
can you share me the images ? 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

TerenceKEANE
Shopify Partner
137 33 28

This is an accepted solution.

Hello,

 

Of course, there's a manual way to do this. It might be a bit cumbersome, but you can easily achieve it with the following approach. Here, what you need to know is that each dropdown menu has its own 'id' value. Besides the initial code below, for example, I first applied 'position: relative' to the link you referred to as 'anklets', and then used 'absolute' to display them on the left side. You can see the 'id' part of these links by right-clicking and selecting 'inspect' when you hover over them with your mouse. I'm not sure if you have access to such an inspection from the admin panel. In short, once you've learned the 'id' parts of these menus, you can easily add an icon to the desired menu using the method below. If you're unable to do so.

 

Best regards,

 

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

 

Screenshot 2024-02-14 145041.png

 

ul#HeaderMenu-MenuList-2 > li {
    padding-left: 30px;
}


#HeaderMenu-categories-anklets {
  position: relative;
}

#HeaderMenu-categories-anklets::before {
  content: '';
  position: absolute;
  left: -20px; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 24px; 
  height: 24px; 
  background-image: url('https://uxwing.com/wp-content/themes/uxwing/download/clothes-and-accessories/diamond-gem-icon.png'); 
  background-size: cover; 
   background-size: contain;
   background-repeat: no-repeat;
}

 

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The Coffee  would be the anchor keeping me steady!
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
★ https://novajetsoft.com --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD!
imfamousrajat
Excursionist
14 1 0

Thanks a lot, man. I was able to it because of you. Really appreciate your help. 🙏

Would you please be kind enough to tell me how to do it for the footer menus as well? Thanks a lot for your time.

Screenshot 2024-02-14 at 2.06.56 PM.png

Store - www.amorella.in
Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

Hey @imfamousrajat there are no ids mentions in the elements of footer. you need to add it based on the URL parameters. I can show you the example for Anklets. 

 

1. Click on the Anklets and copy url parameter last part : https://prnt.sc/OqE99wgboYTM for example = /collections/anklets.

2. create a css code for each individuals. 

 

 

.footer-block__details-content ul li a[href="/collections/anklets"]::before {
    content: "";
    position: absolute;
    background-image: url(https://www.svgrepo.com/show/250331/bracelet.svg);
    width: 18px;
    height: 30px;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    top: 8px;
}
.footer-block__details-content ul li a{
   padding-left: 20px;
}
.footer-block__details-content ul li {
  position: relative;
}

 

 

please change the url parameter and image url in each individuals. 

 

Thanks,

Zeel

 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
Zeel-prajapatii
Shopify Partner
138 32 27

Hey @imfamousrajat i have made some changes to the code please go through it again.

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
imfamousrajat
Excursionist
14 1 0

Thanks for your time, Zeel. I used the code you provided but it does not seem to be working. Can you please re-check it? 

Store - www.amorella.in
Zeel-prajapatii
Shopify Partner
138 32 27

Hey @imfamousrajat it seems like you haven't added the code yet. can you please add it again and let me know the same? 

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
imfamousrajat
Excursionist
14 1 0

I added the code but it wasn't showing any changes. Now, I have removed and re-added the code to my base.css file. Please let me know if it's showing up for you.
Screenshot 2024-02-14 at 3.47.55 PM.png

Store - www.amorella.in
Zeel-prajapatii
Shopify Partner
138 32 27

Hey @imfamousrajat please add it in a "section-footer.css" file. let me know your thoughts.

 

Thanks 

Zeel

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
imfamousrajat
Excursionist
14 1 0

I put it in section-footer-css as you directed. However, it's still not working. The code provided below by @TerenceKEANE is working to some extent but it is messing up the Header menu. 
Screenshot 2024-02-14 at 4.28.31 PM.png

Store - www.amorella.in
TerenceKEANE
Shopify Partner
137 33 28

This will be a bit different, but you can still achieve it using the following tactic. The key here is to target the href part as seen in the image below in Chrome. Since the href part varies for each category, you'll need to use the a[href="/collections/anklets"]::before part provided below separately for each specific href link where you want to add the icon. I believe you can accomplish this through trial and error.

 

Screenshot 2024-02-14 173633.png

 

a.link.link--text.list-menu__item.list-menu__item--link {
    padding-left: 15px;
}

.link--text {
  position: relative;
}

a[href="/collections/anklets"]::before {
  content: '';
  position: absolute;
  left: -15px; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 24px; 
  height: 24px; 
  background-image: url('https://uxwing.com/wp-content/themes/uxwing/download/clothes-and-accessories/diamond-gem-icon.png'); 
  background-size: cover; 
   background-size: contain;
   background-repeat: no-repeat;
}

 

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The Coffee  would be the anchor keeping me steady!
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
★ https://novajetsoft.com --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD!
imfamousrajat
Excursionist
14 1 0

Thanks. The code provided by you for the Footer menu is working to some extent but it is messing up the header menu.

It is displaying the image icon in the Footer menu but totally messing up the Header icon.

Screenshot 2024-02-14 at 4.28.31 PM.png

Store - www.amorella.in
Zeel-prajapatii
Shopify Partner
138 32 27

Hey @imfamousrajat append ".footer-block__details-content" before here https://prnt.sc/DBWa8Cv5dPB_ like this  .footer-block__details-content a[href="/collections/anklets"]::before 

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
imfamousrajat
Excursionist
14 1 0

This is an accepted solution.

Thanks a lot. It seems to be working now. 
 
However, there is a minor issue with the positioning of the icons.
- Do you think there is a better way to set the vertical position of the icons, without using the "Top" property?
- Is it possible to display the icons in the same block as the text, so that they properly align? Example: Block [Icon - Anklets]

In the image attached, I have used Top: 13%; for the first icon and Top: 23%; for the second once.

Screenshot 2024-02-14 at 6.09.15 PM.png 

.footer-block__details-content ul li {
position: relative;
display: flex;
align-items: center;
}

.footer-block__details-content ul li a {
padding-left: 20px;
}

.footer-block__details-content a[href="/collections/anklets"]::before {
content: "";
position: absolute;
background-image: url(https://www.svgrepo.com/show/250331/bracelet.svg);
width: 20px;
height: 20px;
left: -28px;
top: 13%;
background-size: contain;
background-repeat: no-repeat;
}


Thanks again for all the help. I really appreciate your time. 

Store - www.amorella.in
imfamousrajat
Excursionist
14 1 0

Would you please be kind enough to tell me how to do customise the other grid items as well?
I tried to modify the above code but they all seem to have the same class and I am unable to target the right elements.

Screenshot 2024-02-14 at 6.47.07 PM.png

Edit: I was able to do it. I missed out a "/" initially, so, it wasn't working earlier. 

.footer-block__details-content a[href="/pages/track-your-order"]::before {
    content: "";
    position: absolute;
    background-image: url(https://www.svgrepo.com/show/250331/bracelet.svg);
    width: 20px;
    height: 20px;
    left: -28px;
    top: 13%;
    background-size: contain;
    background-repeat: no-repeat;
  }


 

Store - www.amorella.in
hadigems
Visitor
1 0 0

Hello Fellows!

 

I am working on this website: hadigems.com

Trying to add the icons in dropdown menu items. I have read and tried many times to implement the above solution but could not do it successfully. plz have a look and guide me.

 

I am using Ella-5.0.9-sections-ready 1

screen shot is added where i am adding the code.  

 

bartk
Tourist
9 0 0

Hi there! Just used this and it worked perfectly, thank you. I wanted to ask if you know how to make the icons visible on mobile too? Only showing for me on my desktop. Thanks!