Display Search Box Widget In-Line With Social Icons In Header Right

Dec 28, 2013

—

In this post, i’ll give you the CSS code which displays the default search widget inline with the Simple Social Icons in the header right widget area of any StudioPress child theme.

In this example, i’ve worked out the solution for the Lifestyle Pro theme however the code will need some tweaking of the values for other child themes.

Here’s what happens if you simply drag in both widgets into the header right widget area:

And here’s what it looks like after adding the CSS code below to the end of your child themes style.css file:

And here’s the code which fixes the problem:

.site-header .widget-area {
    width: 480px;
}

.header-widget-area .widget_search {
    float: left;
	margin-top: -16px;
}
 
.header-widget-area .simple-social-icons {
    float: right;
}

And here’s what it looks like on a smaller iPad sized screen.

I used an icon size of 50px to match the height of the search box.

You may need to tweak the Media Queries for the search box to get the look you like on smaller hand held devices like iPhones.

Comments

10 responses to “Display Search Box Widget In-Line With Social Icons In Header Right”

Julie Galbraith

May 28, 2014

Hi Brad!

Thanks again for a wonderful tutorial. Question: my search and social icons are showing in my header. I have added them to the header right widget area, but they seem to be showing down in the header? For the socials, I want to use the design I have. How do I get everything to move up and out of the header?

Thanks! Julie

Log in to Reply
1. Brad Dalton
  
  May 28, 2014
  
  Out of the header?
  
  Log in to Reply
  1. Julie Galbraith
    
    May 28, 2014
    
    Sorry – How do I get the search and socials to be on top of the header. Instead of using .simple-social-icons, I would like to use .text – as I am going to use the official logos for each social. The website is – and you will see there now that the search and socials are showing in the header image instead of on top of it.
    
    Log in to Reply
    1. Brad Dalton
      
      May 29, 2014
      
      You’ll need custom coding for that Julie.
      
      Log in to Reply
Weekly Roundup 12.31.13 – Pixel Happy Studio

December 31, 2013

[…] this post, Brad gives us the CSS code which displays the default search widget inline with the Simple Social […]

Log in to Reply
Kulwant

December 29, 2013

Thanks a ton… Just implemented on my blog.. 🙂

Log in to Reply
Michael Borger

December 29, 2013

Good post. How can I tweak the height of the search box to match the social media icons instead? My attempts don’t seem to do the trick so far:
[code]
.header-widget-area .widget_search {
float: left;
margin-top: -32px; (I changed this to try and go flush to the top like the icons)
height: 25px;
}
[/code]

Log in to Reply
1. Brad Dalton
  
  December 29, 2013
  
  Merry Xmas Michael
  
  What you can do is increase the font size for the search box text and then also increase the width of the header right area and then also the size of the icons to 60px min the widget settings:
  
  Here’s the result:
  
  And here’s the CSS code.
  
  [code]
  .site-header .widget-area {
  width: 620px;
  }
  
  .header-widget-area .widget_search input, select, textarea {
  font-size: 2.2rem;
  }
  [/code]
  
  Log in to Reply
  1. Michael Borger
    
    December 29, 2013
    
    Thanks, Brad. Holiday wishes to you as well.
    
    I’m using what you sent me and adjusting to get the look I want. One thing: how can I widen the size of the search box itself? If I remove the left float, it’s super wide. If I re-add the float, it’s too small.
    
    FYi this is for michaelborger.com using eleven40. Thanks for your assistance.
    
    Log in to Reply
    1. Brad Dalton
      
      December 29, 2013
      
      Simply add a width declaration to the existing classes:
      [code]
      .header-widget-area .widget_search {
      width: 500px;
      }
      [/code]
      
      You may also need to reduce the width of the title area.
      
      Log in to Reply