Jump to content

Icon in Secondary Navigation Affecting Text

Go to solution Solved by tuanphan,

Recommended Posts

Hello! I added the following code to add a shopping card icon next to Order Online menu item. It works great, but it affects the alignment of the first link. They are not aligned--I added the red lines so you can see how they are different. Any way to fix?


//Shopping Cart Icon//
.Header-nav--secondary .Header-nav-item:nth-child(1)::before {
  content: '';
  height: 20px;
  width: 20px;
  display: inline-block;
  background: url('https://static1.squarespace.com/static/5fcdc0a3cd8500165ad2a837/t/61300c51f387ea52936de890/1630538833025/shopping-cart+%282%29.png');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;

Screen Shot 2021-09-30 at 11.19.15 AM.png

Link to comment
  • Solution
On 10/6/2021 at 2:54 AM, mackenzieu said:

Add this CSS

a.Header-nav-item[href="/coop-curbside"] {
    position: relative;
    top: 2px;


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

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.