Jump to content

Adding an icon in front of header links in 7.1

Recommended Posts

Hi. So I'm trying to use this tutorial I found online:

A CSS trick to add icons to your navigation links in Squarespace

https://beatrizcaraballo.com/blog/navigation-links-icons?utm_content=tribes&utm_term=736100040_29894866_549810

 

Unfortunately, the coding doesn't work for 7.1. I'm not sure how old that post is. I know it's labeled under Brine. So far I've been able to figure out the css coding for the right header name (I think) but I can't get the block to show up next to the link, it shows up above it.

So far this is what I have taken from the tutorial:

Quote

.header-nav .header-nav-item:nth-child(1)::before {
  content: '';
  height: 30px;
  width: 30px;
  display: inline-block;
  background: red;
  vertical-align: middle;
}

And this is what happens. The red square is above the Home link, but I'm trying to get it next to the Home link.

headershot.thumb.PNG.e9c89df679fb68cea4eb7c463b7de0db.PNG

Obviously I want to put an image there instead of the red square, but I can't even get the red square in the right spot. I'm not super css savvy and I tried googling how display works, but everytime I try putting something else in the display area (inline, block, grid, flex, etc), the red square completely disappears.

What would the right coding be?

Link to comment
  • Replies 3
  • Created
  • Last Reply
55 minutes ago, jhmonkey14 said:

Hi. So I'm trying to use this tutorial I found online:

A CSS trick to add icons to your navigation links in Squarespace

https://beatrizcaraballo.com/blog/navigation-links-icons?utm_content=tribes&utm_term=736100040_29894866_549810

 

Unfortunately, the coding doesn't work for 7.1. I'm not sure how old that post is. I know it's labeled under Brine. So far I've been able to figure out the css coding for the right header name (I think) but I can't get the block to show up next to the link, it shows up above it.

So far this is what I have taken from the tutorial:

And this is what happens. The red square is above the Home link, but I'm trying to get it next to the Home link.

headershot.thumb.PNG.e9c89df679fb68cea4eb7c463b7de0db.PNG

Obviously I want to put an image there instead of the red square, but I can't even get the red square in the right spot. I'm not super css savvy and I tried googling how display works, but everytime I try putting something else in the display area (inline, block, grid, flex, etc), the red square completely disappears.

What would the right coding be?

Could you try this

.header-nav .header-nav-item:nth-child(1)::before {
  content: '';
  height: 30px;
  width: 30px;
  display: inline-block;
  background: red;
  vertical-align: middle;
}
.header-nav .header-nav-item:nth-child(1) a {
  display: inline-block;
}

image.thumb.png.f69e1837058799afb87e1b085f735150.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
12 minutes ago, bangank36 said:

Could you try this


.header-nav .header-nav-item:nth-child(1)::before {
  content: '';
  height: 30px;
  width: 30px;
  display: inline-block;
  background: red;
  vertical-align: middle;
}
.header-nav .header-nav-item:nth-child(1) a {
  display: inline-block;
}

image.thumb.png.f69e1837058799afb87e1b085f735150.png

 

I ended up finding another site with some codes for 7.1, but it's to use FontAwesome icons:

https://bamn.digital/blog-squarespace-web-design-css/add-custom-icons-to-squarespace-navigation

So I mixed the 2 codes from both of them together, and added in the mobile burger menu part as well. I was able to get exactly what I wanted. I'm still hunting for the right icons but at least I got the basic part out of the way. To be honest, I'm not sure what the problem was lol, I think it was the "a" though.

but this is what I have ended up with:

Quote

.header-nav-item:nth-child(1) a::before,
.header-menu-nav-item a[href="/"]::before {
content: '';
  height: 30px;
  width: 30px;
  background: url('https://64.media.tumblr.com/e5db19709bad9bb77f0601c344173c5a/dc9c4b4ef259b56d-b0/s540x810/58a6ce76acca2b0216a09a63c3a83c9d679b459a.png');
  background-size: contain;
  background-repeat: no-repeat;
vertical-align: -3px;
display: inline-block;
}

yaymobileicons.PNG.8fe2cf5e68acb43759d6e328a0deb672.PNGyayicons.PNG.0257cee865ba0360d229805fd0d6e90f.PNG

Link to comment
1 minute ago, jhmonkey14 said:

 

I ended up finding another site with some codes for 7.1, but it's to use FontAwesome icons:

https://bamn.digital/blog-squarespace-web-design-css/add-custom-icons-to-squarespace-navigation

So I mixed the 2 codes from both of them together, and added in the mobile burger menu part as well. I was able to get exactly what I wanted. I'm still hunting for the right icons but at least I got the basic part out of the way. To be honest, I'm not sure what the problem was lol, I think it was the "a" though.

but this is what I have ended up with:

yaymobileicons.PNG.8fe2cf5e68acb43759d6e328a0deb672.PNGyayicons.PNG.0257cee865ba0360d229805fd0d6e90f.PNG

look great

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.