Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Header – Choose the Header Style and Design
  5. How to Set Social Icons Menu in the Header

How to Set Social Icons Menu in the Header

The social menu under the header panel can be customized to match the design and business needs. You get ample of configuration options to perfectly blend it to your needs.

Let’s get started understanding the settings for the social menu. Navigate to your website admin, browse to Appearance > Customize > Header > Social Menu.

Choosing a Social Link Style for the Social Menu

You are provided with four social link styles, each affects the way the social icons are displayed in the header. These are

  • Minimal
    • It uses small icons, a little padding and a thin 1px square border around the icon.
  • Colored
    • It has a squared box background with its original social colors. The icon stands out in white color over different color backgrounds.
  • Dark
    • Pretty much the same as the colored, expect it has a black background for every social icon.
  • Extensive
    • You will only see grayed out icons
    • But you also get extensive configuration options to configure it as per your needs.

Set the Social Link Target for Social Links

Basically, you can choose to open the social links in either the same window or a new window.

You can choose your preference simply by clicking over the dropdown under the “Social Link Target” label in the Social Menu panel.

Change the Font Size for the Social Links in Pixels

If you find the social links to be smaller or larger, you can adjust the icon size in pixels. It’s particularly useful if you want to highlight the social icons or if the size doesn’t match your design.

To change the icon size, you simply need to use the slider under the “Font Size (px)” in the Social Menu panel to increase or decrease the size.

Change the Padding for the Social Icons

Since most businesses use a couple of social icons. It’s important to use the right spacing between the icons to blend well with the design.

With this option, you get to set the padding space for Top, Right, Bottom and Left respectively.

To add custom padding, you just need to find the four input boxes under the “Padding (px)” label in the Social Menu panel. You can fill the input boxes with the desired padding to see live changes to social icons via Theme Customizer.

Alternatively, you can set the same padding for each side. You can click over the link chain icon (5th box) that link padding inputs together. Then set padding at any of the boxes. It would automatically update the rest of the padding inputs.

Set the Margin for the Social Icons

If you want to add a margin to the left and right of the social icons, you can use this option to do so.

Just click over the Right and Left input boxes under the “Margin (px)” label to fill it with margin the same way we have filled in the padding. You also get the chain link icon that you get with padding setup, for linking margins together.

Set a Custom Border Radius in Pixels

The border-radius shapes the corners of the social menu. The less the radius the sharper cornered will be. The more the radius, the less sharp and more rounded the corners are going to be.

Just click over the input box under the “Border Radius” label and change the number keeping the “px” intact. Px here represent pixels

Change the Background Color for Social Icons (Extensive)

Every icon has a background, may it be visible or not due to the colors. You can change the background color for all the icons as well.

Simply click over the “Select Color” button under the “Social: Background Color” label in the Social Menu panel to choose the desired color.

Select the Background Color of Social Icons on Hover (Extensive)

You can change the background color of social icons on mouse-over.

To do that, click over the “Select Color” button under the “Social Hover: Background Color” label in the Social Menu and choose a color to take effect.

Select the Color for Social Icons (Minimal, Extensive)

The social color refers to actually the icon’s color for the social menu. You can change the color here to unanimously change the color for all the icons.

Just click over the “Select Color” button under the “Social: Color” label in the Social Menu to change it.

Change the Social Icons Color on Hover

When you mouse over any social icon, you can choose to change its color. Under the label of “Social Hover: Color” you can click over the “Select Color” button to change its color.

Adding Social Icons to the Social Menu

As an individual, brand or a business, you may be avidly using only a few social media sites. Following is an extensive list of social media sites provided to add to the Social Menu.

You just need to enter the social name and identification in the given input boxes to add the respective social icon to the menu.

  • Twitter
  • Facebook
  • Google Plus
  • Pinterest
  • Dribble
  • VK
  • Instagram
  • LinkedIn
  • Tumblr
  • Github
  • Flickr
  • Skype
  • YouTube
  • Vimeo
  • Vine
  • Xing
  • Yelp
  • Tripadvisor
  • RSS
  • Email
Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?