Jump to content

Issue with shopping basket/bag icon in nav bar

Go to solution Solved by iamdavehart,

Recommended Posts

I'm currently having an issue with my client's nav bar. Years ago when I set up their website, I must have added some custom css to display a shopping bag instead of a shopping cart in the top right of the nav bar. Now that there are multiple shopping cart/bag icons available to choose from on Squarespace I want to use a different default one from Squarespace. However when I select this and delete all the custom CSS from the custom CSS field, the old black bag icon still remains, so there are two bag icons. I've searched the Custom CSS fields, custom files folder, code injection fields, and page header code injection fields and cannot find where this icon is coming from. 

Any help would be great appreciated, thank you in advance.

 

GADG nav.png

Link to comment
15 minutes ago, Ziggy said:

Somewhere in your CSS you have this:

.fa-shopping-bag:before {
    content: "\f290";
}

Hi Ziggy, thanks for responding to this so quickly.

Is there a way of locating where this piece of CSS is? Have searched all custom fields and the only thing I can find is:

i.fa.fa-shopping-bag {
    font-size: 22px;
}

but when I delete this the black bag icon remains but shrinks in size. I can't locate the content: "content:f290"; part anywhere..

Link to comment
  • Solution

you won't find "content:f290" because that is from font-awesome (an icon font). you've inserted a custom script to add a font-awesome icon. the script looks like this, and there will be a font-awesome link/script tag as well probably

<script>
  $(".Cart-inner").append("<i class='fa fa-shopping-bag' aria-hidden='true'></i>");
</script>

It will probably be in your site-wide code injection. The location of the script in your sites source is consistent with where squarespace puts site-wide injected footer code.

Go to settings > advanced > code injection

Edited by iamdavehart

Dave Hart. Software/Technology Consultant living in London

Link to comment
2 hours ago, iamdavehart said:

you won't find "content:f290" because that is from font-awesome (an icon font). you've inserted a custom script to add a font-awesome icon. the script looks like this, and there will be a font-awesome link/script tag as well probably

<script>
  $(".Cart-inner").append("<i class='fa fa-shopping-bag' aria-hidden='true'></i>");
</script>

It will probably be in your site-wide code injection. The location of the script in your sites source is consistent with where squarespace puts site-wide injected footer code.

Go to settings > advanced > code injection

Amazing, thank you so much Dave! It was driving me bonkers trying to find where it was, but if it was a font that will be why. Managed to get it sorted now, thanks again for your help 🙂

Link to comment
On 11/30/2022 at 11:58 PM, sarah_cowan said:

Another question the topic of this website too if anyone can help - in the mobile version of the nav bad/menu the user icon appears giant at the bottom of the menu, is it possible to move this up alongside the shopping cart/bag icon like in previous versions of Squarespace?

 

Screenshot 2022-11-30 at 16.58.19.png

Add this to Design > Custom CSS

/* resize user icon on mobile */
.header-menu-nav-folder-content .user-accounts-text-link {
    background-position: center;
    background-size: 40px;
}

 

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
1 hour ago, tuanphan said:

Add this to Design > Custom CSS

/* resize user icon on mobile */
.header-menu-nav-folder-content .user-accounts-text-link {
    background-position: center;
    background-size: 40px;
}

 

Thanks so much Tuanphan! 🙂 That's a much better size, but is there a way to move it so it sits alongside the shopping back in the top right?

Untitled-2.png

Link to comment
On 12/2/2022 at 6:39 PM, sarah_cowan said:

Thanks so much Tuanphan! 🙂 That's a much better size, but is there a way to move it so it sits alongside the shopping back in the top right?

Untitled-2.png

Use this CSS

@media screen and (max-width:991px) {
.header .customerAccountLoginDesktop {
    display: flex !important;
    position: relative;
    left: -10px;
}
}

 

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.