Customize menu navigation links

Hello,

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 */
.header-nav-folder-item
[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! 

Thanks

@tuanphan Think you could take a look at this? Would hugely appreciate the help

Hi,

What is your site url? We can check easier

@tuanphanmy site is: supersizesocial.com

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

It worked! Your a wizard. Thank you