How to Enable and Customize Social Media Icons in Your Website Header
Built-in social icons display automatically in your site's header after adding social links. Here's how to manage them effectively:
Enable Social Icons (Version 7.1)
- Open Pages panel and click Edit on any page
- Hover over header and click Edit site header
- Click Add elements
- Switch Social links toggle on
- Click Save
Style Your Icons
Size and Border:
- Click Edit Site Header
- Select social links and click the pencil icon
- Choose Design
- Adjust Social Icon Size slider
- Select Border shape (Outline or Solid)
- For Outline style, adjust Thickness slider
Color Customization:
For Solid/Gradient Headers:
- Open header editor
- Click Edit Design > Color
- Adjust Navigation color
- Hover color follows Primary Button Background settings
For Adaptive Headers:
- Access site styles
- Select Colors
- Edit Navigation links in your header's color theme
Icon Shapes Available:
- Round
- Square
- Normal (default service branding)
Hide Social Icons
Version 7.1:
- Open Pages panel
- Click Edit site header
- Click Add elements
- Switch Social links toggle off
- Save changes
Version 7.0:
- Open Site styles panel
- Locate Social tweaks
- Find options like Hide social icons or Show social icons
- Save changes
Templates Supporting Built-in Icons:
- Aviator
- Bedford
- Brine
- Farro
- Montauk
- Pacific
- Skye
- Tremont
- York
Note: Icon placement and styling options may vary by template. Check your template's guide for specific features.