1. Home
  2. Appearance
  3. Header
Searching...

Header

Here are the steps to customize your website header.

  1. Click Customize under Appearance on the sidebar
  2. Click Header > Custom Logo Image
  3. Click the Select Image button under Logo Image.
  4. Upload Image
    1. Drag your logo into the overlay window, or click the Upload Files tab.
    2. Click the Select Files button and browse your computer for your logo.
    3. Click the Choose Image button.
  5. Click the Save & Publish button.
Add Logo for 2.17 & Below

Instructions

  1. In WordPress click Theme Options under Appearance on the sidebar.
  2. Click the Header tab
    Screen Shot 2014-02-07 at 5.25.39 PM
  3. Where you see the Select Logo Type drop down, select Custom Image Logo.
    Screen Shot 2014-02-07 at 5.40.07 PM
  4. Next to Logo Image click the upload button to browse your computer for your logo. Suggested image size is 60 pixels in height and can be up to 560 pixels wide.

    Screen Shot 2014-02-07 at 5.41.53 PM
  5. Once you upload and upload your logo, click the Save Options button at the bottom right of the page.
    Screen Shot 2014-02-07 at 5.29.18 PM

Edit Site Title & Tagline

Your site title and tagline appear at the top left of your website if you have not uploaded a logo.

  1. In WordPress, click Customize under Appearance on the sidebar
  2. Click Header
  3. Edit your Site Title & Tagline
  4. Click the Save & Publish button.
  1. In WordPress, click Customize under Appearance on the sidebar
  2. Click Header > Logo & Title
  3. Click Center under Logo Position
  4. Click the Save & Publish button.
Center Logo for 2.17 & Below

Add this custom CSS code.

/* Center Logo */
#site_logo, #site_name, #site_name h2 { width: 100%; text-align: center; float: none; } #header_social_icons { display: none;}

  1. In WordPress, click Customize under Appearance on the sidebar
  2. Click Header > Social Icons
  3. Enter in the web addresses to the social profiles you would like to display.
  4. Click the Save & Publish button.
Add Social Links for 2.17 & Below

  1. In WordPress click Theme Options under Appearance on the sidebar.
  2. On the options page click the Header tab.
    Header
  3. Fill in the input boxes to the social websites you would like to link too.
    social
  4. Click the Save Options button.
    Button

Once you save your changes, the social buttons will appear on the top right of your website.

Icons

Social Icons CSS Tricks

Change Icons to Squares

Preview

square icons

CSS Code

#header_social_icons .fa { border-radius: 0 !important; }

Remove Circle Background from Icons ( 2.17 & Below )

Preview

social icons

CSS Code

#header_social_icons .fa { background-color: transparent !Important; color: #666666 !Important; font-size: 28px; }
#header_social_icons .fa:hover { background-color: transparent !Important;color: #ffffff !Important; }

Change Icons to One Solid Color ( 2.17 & Below )

Preview

solid icons

Change the hex code color ( #3a91bc ) to the color of your choice.

CSS Code

#header_social_icons .circle { background: #3a91bc !important; }

Change Icons to Brand Colors

Preview

color icons

CSS Code

#header_social_icons .circle {  color: #ffffff !important;  }
#header_social_icons .fa-facebook { background: #3C599B !important; }
#header_social_icons .fa-twitter { background: #1BB2E9 !important; }
#header_social_icons .fa-google-plus { background: #C53C2A !important; }
#header_social_icons .fa-vimeo-square { background: #1AB7EA !important; }
#header_social_icons .fa-youtube { background: #DB2C27 !important; }
#header_social_icons .fa-rss { background: #FAA21C !important; }
#header_social_icons .fa-tumblr { background: #335676 !important; }
#header_social_icons .fa-instagram { background: #D5C9AF !important; }
#header_social_icons .fa-linkedin { background: #007BB6 !important; }
#header_social_icons .fa-pinterest { background: #CD1F28 !important; }
#header_social_icons .fa-flickr { background: #0262DA !important; }
#header_social_icons .fa-soundcloud { background: #FE6E00 !important; }
#header_social_icons .fa-facebook { background: #3C599B !important; }

How to Center the Social Icons

Only use this code if you are centering your site logo.

#header_social_icons { float: none;   text-align: center !important;  width: 100%; }

Add Favicon

Favicons are the small 16 pixels by 16 pixels pictures you see beside some URLs in your browser’s address bar.

Screen Shot 2014-02-13 at 9.18.54 PM

  1. In WordPress, click Customize under Appearance on the sidebar
  2. Click Header > Logo & Title
  3. Click the Select Image under the Site Icon.
  4. Upload Image
    1. Drag your logo into the overlay window, or click the Upload Files tab.
    2. Click the Select Files button and browse your computer for your logo.
    3. Click the Choose Image button.
  5. Click the Save & Publish button.
Add Favion for 2.17 & Below

  1. In WordPress click Theme Options under Appearance on the sidebar.
  2. Click the Header tab.
    Screen Shot 2014-02-07 at 5.25.39 PM
  3. Browse your computer for your 16×16 pixel favicon.
    Screen Shot 2014-02-07 at 5.26.15 PM
  4. Once you upload and select your favicon, click the Save Options button at the bottom right of the page.
    Screen Shot 2014-02-07 at 5.29.18 PM

Customize Header Colors

Here are the steps to edit your website’s header colors in 2.18 and above.

  1. Click Customize under Appearance on the sidebar.
  2. Click Header > Colors
  3. Edit the color settings and click the Save & Publish button to make changes live.

 

CSS Tips & Tricks

How to Make Your Header White ( 2.17 & Below )

You do not need to follow this tutorial for 2.18 and above. The code below is for 2.17 and below.

Preview

header white

/* Changes Header to White  */
.navigation_holder, .header_holder { background-color: #ffffff; }
/*  Makes Social Icons a Light Grey  */
#header_social_icons .circle { color: #ffffff; background-color: #e4e4e4; }
/* Changes Navigation Link Color  */
.navigation_holder a , ul.topnav .menu-button { color: #666666 !important; }
.navigation_holder ul li ul li a  {  color: #ffffff !important; }

Change the Header Background Color ( 2.17 & Below )

/* Change Header BG Color */
.navigation_holder, .header_holder { background-color: #333333 !important; }

The code above removes the background image and changes the color to a dark grey. You change the dark grey #333333 to what ever color you want.

You can use the color picker at colorpicker.com to get the color you want.

Remove the Background From the Header

Remove header background

.navigation_holder, .header_holder {
  background-color: none !important;
  background-image:  none !important;
  background: none !important; }

Add a Color Border Under Your Header

/* Header Border */.header_holder { border-bottom: solid 3px #2d8bbc; margin-bottom:15px; }

Image Preview

Screen Shot 2014-07-21 at 8.39.34 PM

Updated on March 5, 2025
Tagged:

Was this article helpful?

Yes No

Related Articles


Need Help?

1. Try searching for answers. Try searching different terms if you can't find a answer. 2. Try troubleshooting if something is not working.

3. If you can't find answers, click to leave a comment. Provide website links and detailed information.