• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

  • Display Header Right Widget Custom Menu & Social Icons In-Line
  • Style Simple Social Icons

Search

Reader Interactions

Comments

  1. Julie Galbraith says

    May 28, 2014 at 3:00 pm

    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
    • Brad Dalton says

      May 28, 2014 at 3:05 pm

      Out of the header?

      Log in to Reply
      • Julie Galbraith says

        May 28, 2014 at 11:30 pm

        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
        • Brad Dalton says

          May 29, 2014 at 6:43 am

          You’ll need custom coding for that Julie.

          Log in to Reply
  2. Kulwant says

    December 29, 2013 at 9:00 am

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

    Log in to Reply
  3. Michael Borger says

    December 29, 2013 at 12:24 am

    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;
    }
    Log in to Reply
    • Brad Dalton says

      December 29, 2013 at 7:19 am

      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;
      }
      Log in to Reply
      • Michael Borger says

        December 29, 2013 at 10:53 am

        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
        • Brad Dalton says

          December 29, 2013 at 10:59 am

          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.

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.