Search bar on the top

Thank you Jitendra. I’ve tried a similar option. What I get is a not very nice looking search bar. I’m quite clueless about creating HTML/CSS code. It would be great if you could help me out with it. I want to have it positioned on the same line as the social icons preferably without the big search button. Or have a drop down as the 2014 theme.

I’ve updated the code on my URL.

Any help would be great.

Thank you!

Hello,

For making the drop down search box it requires a lot of customization.
Rather you can try this in your Custom CSS for styling the current search box:

#topsearchbox #searchsubmit {
    display: none;
}
#topsearchbox #searchkey {
    border: 2px solid #f00;
    border-radius: 9px;
    padding: 5px 8px;
    width: 235px;
}
.topbar .social {
    margin-top: 4px;
}

Please make sure to use this code in your theme’s custom css field. If your theme does not provide custom css, then please refer this link to know how to add custom css:

In the above code you can adjust the values as per your requirement also.

Hope that will help. Thank you.

Thank you Jitendra. It looks closer to what I had in mind. I modified your CSS and the HTML to have it suit the theme better. However, the search bar is still situated on the left of the social icons. I’m unable to figure out how it can be pushed to the right of the social icons.
The current CSS (in the theme’s custom CSS field):

#topsearchbox {
	padding-top: 3px;
	float: right;
}
#topsearchbox #searchsubmit {
    display: none;
}
#topsearchbox #searchkey {
    border: 0px solid #000;
    border-radius: 5px;
    padding: 5px 8px;
    width: 200px;
}

Ah. Figured it out. I had to move the Search div before the Social icons div. ??

Thank you! ??

Hello,

I am glad you figured that out.

Welcome.