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.
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
Out of the header?
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.
You’ll need custom coding for that Julie.
Thanks a ton… Just implemented on my blog.. š
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:
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.
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.
Simply add a width declaration to the existing classes:
You may also need to reduce the width of the title area.