Jump to content

Customising Customer Accounts icon in nav bar (7.1)

Recommended Posts

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

 

Edited by sarah_cowan
duplicate text
Link to comment
  • Replies 8
  • Views 719
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

 

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
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?

 



 

 

Screenshot 2022-03-14 at 11.25.20.png

Screenshot 2022-03-14 at 11.27.28.png

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

 



 

 

Screenshot 2022-03-14 at 11.25.20.png

Screenshot 2022-03-14 at 11.27.28.png

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

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

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

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.