Customising Customer Accounts icon in nav bar (7.1)

Site URL: https://www.giveadamngift.com/home

Hi, another Squarespace user here frustrated at not being able to customise the customer nav bar icon in 7.1 like we could for 7.0!

I found info in this previous post here about changing the 'login' text in the nav bar to an svg icon, and added the code below.

I'm currently trying to change the colour of this from white to #4c7bb2 and make it so the customer icon also appears in mobile view.

Can anyone please help?

/* Login text to icon */
.user-accounts-text-link span {
    color: transparent;
}

.user-accounts-text-link {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMGMtNi42MjcgMC0xMiA1LjM3My0xMiAxMnM1LjM3MyAxMiAxMiAxMiAxMi01LjM3MyAxMi0xMi01LjM3My0xMi0xMi0xMnptNy43NTMgMTguMzA1Yy0uMjYxLS41ODYtLjc4OS0uOTkxLTEuODcxLTEuMjQxLTIuMjkzLS41MjktNC40MjgtLjk5My0zLjM5My0yLjk0NSAzLjE0NS01Ljk0Mi44MzMtOS4xMTktMi40ODktOS4xMTktMy4zODggMC01LjY0NCAzLjI5OS0yLjQ4OSA5LjExOSAxLjA2NiAxLjk2NC0xLjE0OCAyLjQyNy0zLjM5MyAyLjk0NS0xLjA4NC4yNS0xLjYwOC42NTgtMS44NjcgMS4yNDYtMS40MDUtMS43MjMtMi4yNTEtMy45MTktMi4yNTEtNi4zMSAwLTUuNTE0IDQuNDg2LTEwIDEwLTEwczEwIDQuNDg2IDEwIDEwYzAgMi4zODktLjg0NSA0LjU4My0yLjI0NyA2LjMwNXoiLz48L3N2Zz4=);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    filter: invert(1);
}

You want

• Change icon color on desktop
• Make it appear on mobile

Is this right?

5 hours ago, tuanphan said:

You want

• Change icon color on desktop
• Make it appear on mobile

Is this right?

Hi @tuanphan, yes that's correct 🙂 I want the icon to appear in both desktop and mobile and in the colour blue #4c7bb2 please

#1. Icon is an image. You can't change it to custom color with code. You will need to download image to your pc, change its color with PTS, AI...then upload it to your site, then get image url, then add to this line

background-image: url(enter new image url here, see how to upload image & get image url: https://beaverhero.com/squarespace-how-to/#How_to_Upload_an_Image_Get_its_URL);

#2. Add to Design > Custom CSS

/* Login icon on mobile */
@media screen and (max-width:767px) {
.user-accounts-text-link {
    filter: invert(0);
    background-position: center;
}
}

8 hours ago, tuanphan said:

#1. Icon is an image. You can't change it to custom color with code. You will need to download image to your pc, change its color with PTS, AI...then upload it to your site, then get image url, then add to this line

background-image: url(enter new image url here, see how to upload image & get image url: https://beaverhero.com/squarespace-how-to/#How_to_Upload_an_Image_Get_its_URL);

#2. Add to Design > Custom CSS

/* Login icon on mobile */
@media screen and (max-width:767px) {
.user-accounts-text-link {
    filter: invert(0);
    background-position: center;
}
}

 

Hi @tuanphan thanks for getting back to me so quickly.

I've inserted the new image following your helpful instructions, thanks 🙂

I'm having some trouble with the code for adding the customer account login icon into the mobile navigation bar. It's placing the account login icon in the mobile menu and not in the navigation bar. Please see the images attached of where this currently is and where I want it to go (essentially where Squarespace 7.0 used to place the icons in the mobile nav).
Please can you help?

1 hour ago, sarah_cowan said:

Hi @tuanphan thanks for getting back to me so quickly.

I've inserted the new image following your helpful instructions, thanks 🙂

I'm having some trouble with the code for adding the customer account login icon into the mobile navigation bar. It's placing the account login icon in the mobile menu and not in the navigation bar. Please see the images attached of where this currently is and where I want it to go (essentially where Squarespace 7.0 used to place the icons in the mobile nav).
Please can you help?

 

 

 

Hi,
Where is the icon of the user account now?

Best,
Leopold

Hi @IXStudio, the user account icon is currently in the top left next to shopping bag/cart icon on desktop, and at the bottom of the nav bar menu in mobile. Please see website here and above screenshots for reference.
Many thanks.

3 hours ago, sarah_cowan said:

Hi @IXStudio, the user account icon is currently in the top left next to shopping bag/cart icon on desktop, and at the bottom of the nav bar menu in mobile. Please see website here and above screenshots for reference.
Many thanks.

Sorry I just seeing the "Login" text there.

10 minutes ago, IXStudio said:

Sorry I just seeing the "Login" text there.

Ah I see, sorry about that. The code Tuanphan gave above for the mobile icon undid the other code. I have removed this for now and the icons display properly. However I still need the login icon to appear in the mobile nav bar as in my earlier post. Can anyone please help?