Adding icons in Dropdown Menu/Navigation Menu

[imfamousrajat]

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 👇

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. 🙏

Store: amorella.in
Password: eaffew

[TerenceKEANE · 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

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;
}

[Zeel-prajapatii · 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

[Zeel-prajapatii]

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

[imfamousrajat]

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. 🙂

[Zeel-prajapatii]

@imfamousrajat 
can you share me the images ? 

[imfamousrajat]

Sure, here are the SVG links of the images.

Anklet - https://www.svgrepo.com/show/250331/bracelet.svg
Bracelets - https://www.svgrepo.com/show/250336/bracelet.svg
Crystals Trees - https://www.svgrepo.com/show/513109/tree-decidious.svg
Earrings - https://www.svgrepo.com/show/250334/earrings.svg
Necklaces - https://www.svgrepo.com/show/513928/necklace-heart-love.svg
Pendants - https://www.svgrepo.com/show/320868/gem-pendant.svg
Phone Charms - https://www.svgrepo.com/show/414284/charm.svg
Sun Catchers - https://www.svgrepo.com/show/67383/lights.svg
Skin Care Tools - https://www.svgrepo.com/show/366690/beauty-salon.svg

[TerenceKEANE · 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

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;
}

[imfamousrajat]

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.

[Zeel-prajapatii · 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

[Zeel-prajapatii]

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

Thanks

[imfamousrajat]

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? 

[Zeel-prajapatii]

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

[imfamousrajat]

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.

[Zeel-prajapatii]

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

Thanks 

Zeel

[imfamousrajat]

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. 

[TerenceKEANE]

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.

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;
}

[imfamousrajat]

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.

[Zeel-prajapatii]

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

[imfamousrajat · 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.

 

.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. 

[imfamousrajat]

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.



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;
  }

[hadigems]

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]

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!

[KadirIbis]

hello, I wanted to do the same, but unfortunately it didn't work for me.

what could be wrong?

thank you in advance and I hope we can find a solution for my shop.

my shop: hepsini.de