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.