Custom icons in drop down menu

Hi there,

I'm looking to add club badges next to options in my dropdown menu under 'Articles'.

I believe this can be achieved with code but I've been messing with it and have not managed to solve it.

I'm looking to mimic the attached image:

Also, how do I add the logo next to the text on the 'Barcelona' page? 

I'd also like to change the colour of this specific page.

Many thanks in advance,

Samuel

Tagging you @Ziggy just in case this has slipped through the net 🙂 

Can you share your website URL?

It's https://www.talkballuk.com

You'll need to do something like this in Custom CSS, but targeting the correct

.Header-nav-folder-item:nth-child(2) a::before { 
  content: 'https://images.squarespace-cdn.com/content/v1/5e1c5e76664c8f600c27acba/f202aac8-f8ce-434c-81e1-358ea5b20b1f/Asset+8.png?format=40w'; 
  display: inline-block;
  padding-right: 6px; 
}

If you can upload a correct icon in Custom CSS, it will be easier to play with sizing and positioning.

That hasn't worked unfortunately 😞

9 hours ago, Ziggy said:

If you can upload a correct icon in Custom CSS, it will be easier to play with sizing and positioning.

Have you done this?

Yeah, this is the code i've got in right now.

I've played around with the nth-child number and the sizing and positioning and it still doesn't show up on neither Chrome or Safari on desktop, or mobile.

Can you see what I could be doing wrong?

I've also followed these steps and it still doesn't work. Is there another way I can achieve this? 

On 3/18/2023 at 1:14 AM, Samuel7 said:

I've also followed these steps and it still doesn't work. Is there another way I can achieve this? 

Use this new code

span.Header-nav-item.Header-nav-item--folder:nth-child(2)>a::before { 
    content: "";
  background-image: url(https://images.squarespace-cdn.com/content/v1/5e1c5e76664c8f600c27acba/f202aac8-f8ce-434c-81e1-358ea5b20b1f/Asset+8.png?format=40w); 
 background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
    width: 20px;
    height: 20px;
  padding-right: 10px;
}

12 hours ago, tuanphan said:

Use this new code

span.Header-nav-item.Header-nav-item--folder:nth-child(2)>a::before { 
    content: "";
  background-image: url(https://images.squarespace-cdn.com/content/v1/5e1c5e76664c8f600c27acba/f202aac8-f8ce-434c-81e1-358ea5b20b1f/Asset+8.png?format=40w); 
 background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
    width: 20px;
    height: 20px;
  padding-right: 10px;
}

 

Thank you for this @tuanphan

It shows as this: 

Do you know how I can get it to target the options in the folder?

I'm looking to get it just in front of the 'Barcelona' option. Is there a way to get this to show on mobile as well?

On 3/20/2023 at 5:19 AM, Samuel7 said:

Do you know how I can get it to target the options in the folder?

I'm looking to get it just in front of the 'Barcelona' option. Is there a way to get this to show on mobile as well?
 

Hi,

Both dropdown items will use same image or different?

If same, use this new code

span.Header-nav-item.Header-nav-item--folder:nth-child(2) span a::before { 
    content: "";
  background-image: url(https://images.squarespace-cdn.com/content/v1/5e1c5e76664c8f600c27acba/f202aac8-f8ce-434c-81e1-358ea5b20b1f/Asset+8.png?format=40w); 
 background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
    width: 20px;
    height: 20px;
  padding-right: 10px;
}

7 hours ago, tuanphan said:

Hi,

Both dropdown items will use same image or different?

If same, use this new code

span.Header-nav-item.Header-nav-item--folder:nth-child(2) span a::before { 
    content: "";
  background-image: url(https://images.squarespace-cdn.com/content/v1/5e1c5e76664c8f600c27acba/f202aac8-f8ce-434c-81e1-358ea5b20b1f/Asset+8.png?format=40w); 
 background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
    width: 20px;
    height: 20px;
  padding-right: 10px;
}

Thanks for this @tuanphan 

The items will use different images and I'm planning to add a few more options in the menu bar as I go along.

- How do I add different images to different options?

- and is there a way to position the image down slightly?

On 3/25/2023 at 8:00 AM, tuanphan said:

Use this new code

span.Header-nav-item.Header-nav-item--folder:nth-child(2) span a::before {
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    padding-right: 10px;
    content: "";
    position: relative;
    top: 5px;
}
span.Header-nav-folder>a:nth-child(1):before {
    background-image: url(https://cdn.pixabay.com/photo/2023/03/17/16/55/man-7859085_1280.jpg) !important;
}
span.Header-nav-folder>a:nth-child(2):before {
    background-image: url(https://cdn.pixabay.com/photo/2023/03/17/20/42/camera-7859402_640.jpg) !important;
}
span.Header-nav-folder>a:nth-child(3):before {
    background-image: url(https://cdn.pixabay.com/photo/2023/01/26/18/11/maple-leaf-7746726_640.png) !important;
}

This works brilliantly!

Many thanks for your help with this @tuanphan

Out of curiosity, is there a way that I can get these icons to show up on the mobile menu?

On 4/3/2023 at 1:48 PM, Samuel7 said:

This works brilliantly!

Many thanks for your help with this @tuanphan

Out of curiosity, is there a way that I can get these icons to show up on the mobile menu?

Yes. Possible. Can you send current code which you are using? We can adjust it for mobile easier

I missed the part where you know or set where the icons are

could you please explain? 

@tuanphan  

On 4/3/2023 at 8:48 AM, Samuel7 said:

This works brilliantly!

Many thanks for your help with this @tuanphan

Out of curiosity, is there a way that I can get these icons to show up on the mobile menu?

How can I do this with Google Fonts Icons? 

16 hours ago, Guillermo said:

How can I do this with Google Fonts Icons? 

What is your site url? We can check easier