Change Navigation Link to Image in Squarespace

Описание: Bring emphasis and customization to your Squarespace header by changing any navigation link to a custom image with this CSS hack!

Original post:
https://ajmexperience.com/learn-posts...

For more Squarespace tips to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn

Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...

Get our full CSS Library:
https://www.ajmexperience.com/squares...

——————

Note! the PNG used in the video is 400px X 100px

HERE'S THE CSS:

// desktop //
/* adjust child number as needed */
.header-nav-item:nth-child(2) a {
background-image: url("IMAGE-URL");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 90px; /* adjust as needed */
height: 20px; /* adjust as needed */
border: none;
padding: 5px; /* adjust as needed */
font-size: 0 !important;
overflow: hidden;
background-color: transparent;
display: inline-block;
cursor: pointer; }

// mobile //
@media only screen and (max-width: 750px) {
.header-menu-nav-item:nth-child(2) a {
background-image: url("IMAGE-URL");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 120px; /* adjust as needed */
height: 30px; /* adjust as needed */
border: none;
padding: 5px; /* adjust as needed */
font-size: 0; /* hides text */
overflow: hidden;
background-color: transparent;
display: inline-block;
cursor: pointer; }}

——————

AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/

☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm

Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.

——————

This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)