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.

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?

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.

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

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

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

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:

look great