How to Enable and Customize Social Media Icons in Your Website Header

How to Enable and Customize Social Media Icons in Your Website Header

By Michael Thompson

January 14, 2025 at 08:53 PM

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)

  1. Open Pages panel and click Edit on any page
  2. Hover over header and click Edit site header
  3. Click Add elements
  4. Switch Social links toggle on
  5. 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:

  1. Open Pages panel
  2. Click Edit site header
  3. Click Add elements
  4. Switch Social links toggle off
  5. Save changes

Version 7.0:

  1. Open Site styles panel
  2. Locate Social tweaks
  3. Find options like Hide social icons or Show social icons
  4. 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.

Related Articles

Previous Articles