Feeling a little "meh" about your website's social media icons? I get it - matching the navigation links is kinda boring.
Let's ditch the defaults and inject some serious personality into your website header! In this tutorial, you’ll learn how to use a sprinkle of custom code to create social media icons that perfectly match your brand colors.
But wait, there's more! We won't just stop at the desktop version. You’ll also learn how to customize the colors for your mobile site, ensuring a cohesive look across all devices.
You can update any of the codes to be mobile only by changing .header to .header--menu-open
For the border code, add .header-menu-open before the text .header-icon-border-style-outline and it will be mobile-only.
Here are the main codes from the video:
/* icon color */
.header .icon svg {
fill: yellow!important
}
/* icon background */
.header .icon--fill {
background: lightblue!important
}
/* icon border */
.header-icon-border-style-outline {
color: green!important
}
Chapters:
00:49 how to add custom code to squarspace 7.1
02:15 change the social icon design to border
Related Content:
📝 Original blog post → insidethesquare.co/squarespac...
❤️ Support my channel → buymeacoffee.com/insidethesquare
🎨 A free guide to color codes (article): insidethesquare.co/colors
📱 Creative mobile menu ideas: insidethesquare.co/squarespac...
📑 My Squarespace code collection → insidethesquare.co/css
📖 Learn Squarespace CSS for FREE → insidethesquare.co/learn
🙋♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ #WebDesign #CSS #Tutorial #SquarespaceTutorial #WebDevelopment #CreativeDesign #UIUX #CodeTutorial
26 май 2024
