WP SITES

2786

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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

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:

default widgets

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

search and social icons

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.

ipad

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.

Related Solutions

Reader Interactions

Comments

  1. 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

  3. 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:

    .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;
}

    • 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:

      increase search box size

      And here’s the CSS code.

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

.header-widget-area .widget_search input, select, textarea {
    font-size: 2.2rem;
}

      • 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:

          .header-widget-area .widget_search {
	width: 500px;
}

          You may also need to reduce the width of the title area.

Leave a Reply