Hamburger Icon in 7.1 desktop

Hi,

Thanks to this forum I now have a hamburger icon on my desktop. But is there a way of adding 3 lines instead of just 2 – or making the 2 lines slightly thicker?

In Safari it's a little hard to see it in the top right corner...

You can also change to custom icon?

.burger-box div {
    display: none;
}
.burger-box {
    background-image: url(https://static.thenounproject.com/png/3143942-42.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

or make burger bold

.burger-inner:after, .burger-inner:before {
    height: 3px;
}

If the code doesn't work, can you share link to your site?

Thanks.

The bold worked. Although for some strange reason doesn't make a difference to viewing in Safari - it still looks skinny there. Weird.

The first one just gives a strange looking icon – I'm not sure how to change this?...

You can change icon url in above code.

I looked on the noun project - I could see how you download an icon but not how you linked one. And when I typed that url into my browser it was just a blank page.

replace this with new url

background-image: url(https://static.thenounproject.com/png/3143942-42.png);

you can séarch on Flaticon.com

Sorry, I'm just not getting how this is done. How you link to an individual icon. I might have to give up on this.

Have you solved yet?

No, sorry. I didn't understand how this worked. I couldn't find a url link to an icon online. Only how to download an icon from a site.

2 hours ago, mportch said:

No, sorry. I didn't understand how this worked. I couldn't find a url link to an icon online. Only how to download an icon from a site.

You can download icon on Internet, upload to your site: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

and insert link to my code

Ok great thanks, I'll check this out later!