Comprehensive Guide: How to Manage Social Media Icons in Website Headers

Comprehensive Guide: How to Manage Social Media Icons in Website Headers

By Michael Thompson

January 14, 2025 at 10:12 PM

Social icons appear in your site's header after adding social links. Here's how to manage them effectively:

Viewing Social Icons

For Version 7.1:

  • Open Pages panel and click Edit on any page
  • Click Edit site header
  • Enable Social links under Add elements
  • Add social links via the Content tab when hovering over Social links

For Version 7.0: Social icons automatically display in these template families:

  • Aviator
  • Bedford
  • Brine
  • Farro
  • Montauk
  • Pacific
  • Skye
  • Tremont
  • York

Customizing Style

Size and Border:

  1. Edit site header
  2. Click social links and select Design
  3. Adjust icon size using the slider
  4. Choose border shape (Outline or Solid)
  5. Set border thickness if using Outline

Color Settings:

  • For Solid/Gradient headers: Change via Navigation color in header editor
  • For Adaptive headers: Modify through Site Styles > Colors > Navigation links
  • Hover colors can be adjusted through Main button background settings

Hiding Social Icons

Version 7.1:

  • Edit site header
  • Disable Social links under Add elements

Version 7.0:

  • Open Site Styles
  • Locate social tweaks (may be labeled as "Hide social icons" or "Social position")
  • Toggle visibility as needed

Additional customization options vary by template, including icon shapes (Round, Square, or Normal brand shapes).

Remember that social links are site-wide, meaning changes affect all pages consistently.

Related Articles

Previous Articles