Jump to content

Custom icons in drop down menu

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 20
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

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?

code window.png

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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: 

ltb_screenshot.png

Link to comment
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?
 

screenshot_543.png

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

image.png.06c6b9cc7e925858bef59fb13172ed38.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

image.png.06c6b9cc7e925858bef59fb13172ed38.png

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?

screenshot_567.png

Link to comment
  • Solution
On 3/21/2023 at 11:00 PM, Samuel7 said:

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?

screenshot_567.png

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

image.thumb.png.4dbade9230e07f991ae950f6c7083568.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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;
}

image.thumb.png.4dbade9230e07f991ae950f6c7083568.png

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?

Edited by Samuel7
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.