Jump to content

Customize menu navigation links

Recommended Posts


In my navigation bar I have customized all of the folders and page links to have icons.

The 'contact' folder in the navigation bar has a drop down menu so people can contact us via IG, FB, email or phone.

I cannot figure out how to put icons next to each of these links. I don't have the code for it because they are in a folder and they are external links not pages.

This is the code I was trying to use to put an Instagram logo next to the 'Instagram DM' link in the nav folder:

/*Instagram DM */
[href="https://www.instagram.com/supersizesocial/"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/635e87c54b39565ec8ba2fa4/1667139525562/Instagram+DM.png);
    background-size: contain;
    width: 23px;
    height: 23px;
    display: inline-block;
    margin-right: 10px;
    top: 4px;


I think the issue with this code is that bit at the top: header-nav-folder-item

I have also tried to use: header#header


Can someone send me the correct code to add an image and make adjustments to these external links that are inside a navigation folder.

Furthermore, one of the links is a phone number so people could call us via skype when clicking on it, the other is an email link which will open up their inbox. Perhaps different codes are required for these as they are different kinds of external links.

Appreciate any help I can get! 



Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 11/17/2022 at 2:19 AM, supersizesocial said:

@tuanphanmy site is: supersizesocial.com


Use this code

a.header-nav-folder-title[href="/contact-us"]+div>div a:before {
    background-size: contain;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 10px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
a.header-nav-folder-title[href="/contact-us"]+div>div:nth-child(1) a:before {
    background-image: url(https://cdn.pixabay.com/photo/2022/10/07/12/02/sunset-7504891_640.jpg);
a.header-nav-folder-title[href="/contact-us"]+div>div:nth-child(2) a:before {
    background-image: url(https://cdn.pixabay.com/photo/2022/08/29/22/33/sunset-7419911_1280.jpg);
a.header-nav-folder-title[href="/contact-us"]+div>div:nth-child(3) a:before {
    background-image: url(https://cdn.pixabay.com/photo/2022/11/12/16/42/elk-7587415_640.jpg);


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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.