Adding Large & Responsive Search Box To The Header (Next To Website Name)

Hi there , I found an old thread discussing the search bar issue. But it doesn’t seem to work for me. (https://www.ads-software.com/support/topic/how-do-i-add-search-bar-in-the-header)

* By default its on the top menu bar right side (shown by a magnifying glass icon – and some one has to click on the icon to show the search box)
* Even if the Search Box I add via header advertisement widget gets cornered to right side/small in size and its not visible in mobile screens)

What I wish to have is some what like this
(just for example : (https://pocketdentistry.com)
https://imgur.com/HqgQshB
https://imgur.com/xoZz4VV

* the search box in the header widget area right to the Website name.
* The search box needs to be responsive and not hide when seen in mobiles/seen below the site name.

I know its a big task but as it’s a document based site. So, I wish to have a prominent / open search box that the readers cam immediately type in to, to search the documents.

So any guidance of using a plugin or child theme or CSS codes to achieve it will be greatly appreciated. I can save the codes for future use.

Hi Deb. There are a number of plugins you could take a look at. Here’s a list in the wp.org repository:
https://www.ads-software.com/plugins/search.php?q=search

And a list from a Google search:
https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=wordpress%20search%20bar%20plugin

Hi there, Thank you for reply.

I checked the plugins. I had previously before posting the query. The plugins are not coming handy. The plugins are for enhancing the wordpress search.
(They have No relation to placing or Position of the search box).

My issue is with the placement of the search box.
Link to my site : https://www.dentalpub.com

So I guess I need modifications to place the search box in the header section. Some what similar to this https://pocketdentistry.com/

I see you’ve made some adjustments to the search form you had in the header widget. Is it the way you want it now?

No, its just some thing am trying to do. But I am just a beginner in coding so , I am not able to get the search box correctly. I had just placed the default search form code in to the widget but that is not giving desired effect.

The default search system provided by you guys is really good for all my other blogs. But as this site is Documents Search Site, Viewers Need a Bold Visible Search Box.
**********

I understand that modifications might need use of codes in child theme and CSS also but am not getting the proper codes.

So have deleted those and back to the default design.

********************

If you can suggest me a way to have a search box liked I asked in my questions, that will be very helpful.

My issue is with the placement of the search box.
Link to my site : Here

So I guess I need modifications to place the search box in the header section. Some what similar to this https://pocketdentistry.com/
But doing such coding is beyond my customisation knowledge. Waiting for some solution from your end.

Exact Requirements :

To have a prominent big search box – Next to Site Name (Desktop) and below the site name (in mobiles : responsive)
https://imgur.com/HqgQshB
https://imgur.com/xoZz4VV

Will be great help if a solution is possible. Thank you.

Hi there I found one more pic to just explain my requirements I talked about in the last replies. I am not sure if I am explaining you exactly the way I want the search box to appear.
May be these 2 pics will help :

Search Box

Another Search Box Pic

I have scanned all possible resources on net including CSS tweaks, but none of them works properly.

I guess the change has to be made in the default wordpress search form & use those in a child theme, but not able to get the correct codes.

Thank you for patiently solving all my queries till date using this awesome theme.
Hopefully I can get a solution for this too.

You could put the default Search widget back in the Header Widget, then add this to your custom CSS:

#header-widgets {
	float: left;
	display: block;
	width: 500px;
	max-width: 95%;
	margin-top: 5px;
}
#header-widgets .widget_search {
	margin-left: 30px;
}
#header-widgets .searchform input {
	height: 75px;
	line-height: 50px;
	font-size: 24px;
	border: 1px solid #333;
	border-radius: 50px;
}
#header-widgets .searchform div:after {
	content: none;
}

It’s probably not exact for your configuration but should be a starting point. You may have to add a media query for the mobile view depending on what the rest of the header does.

Yes that placed the search bar next to the site name.
And it seems to be responsive too, adjusting well to different screen sizes.
Thank you so much.
For now I am just happy that I got a Prominent search box.

Please have a look at the search box that I got after following your instructions. Do you feel any more tweek is needed in regards to style and responsive.
**************
You said :

It’s probably not exact for your configuration but should be a starting point. You may have to add a media query for the mobile view depending on what the rest of the header does.

Is there any more change needed for optimisation or change of look of the search box ?

Please have a look at the search box that I got after following your instructions. DO you feel any more trek is needed in regards to style and responsive.
***********
N.B. A shout out and ten thumbs up to bdbrown and hueman team for the amazing support in providing customisations. Thank you guys.

Yes that placed the search bar next to the site name.

As you mentioned in the last reply that some tweaks are needed to improve responsiveness :
I did try one of the codes which you had suggested for the header widget ad which was not responsive in my other blog using the hueman theme.

#header-widgets {
    max-width: 728px;
    width: 100%;
}@media only screen and (max-width: 728px) {
  #header-widgets {
    display: block !important;
  }
}

But am not sure how effective it is. If you feel any thing more can be done to improve the style and optimisation, do tell me.

**************

Please have a look at the search box that I got after following your instructions.

Hi there …

As you stated I checked the search box in various screens.

In desktop – the website name and search box are aligned.

But in iPad screen the website gets to left corner rather than being at centre.

Here is the screen Shot Link

As the screen gets smaller the search box reduces in size but the site name doesn’t centre.

So is there any way by which we can make the name of the site align at the centre above the search box as the screen gets smaller ?

You can remove this; not needed:

#header-widgets {
    max-width: 728px;
    width: 100%;
}@media only screen and (max-width: 728px) {
  #header-widgets {
    display: block !important;
  }
}

Then add this:

/* changes for iPad viewport */
@media only screen and (max-width: 960px){
    /* remove top padding */
    #header .pad {
        padding-top: 0;
    }
    /* adjust and center title */
    .site-title {
        padding: 30px 0;
        width: 100%;
        float: none;
        line-height: 50px;
    }
    .site-title a {
	text-align: center;
    }
    /* hide description */
    .site-description {
	display: none;
    }
    /* center search widget container */
    #header-widgets {
	float: none;
	margin: 0 auto;
    }
}

Hi bd brown, Thank you for your valuable suggestions … and it is working nicely.

I tried the codes and it worked perfectly in the normal mode. Posting the screen shots of iPad Here is the screenshot

But when the iPad is screen is rotated : here is the screen shot
When the iPad screen is rotated you can see the site name text is not aligning at the centre. Can we adjust that ?

Change the media query breakpoint to stay active for a wider viewport:

@media only screen and (max-width: 1200px){

Great many thanks bdbrown.

With your help , I got the site exactly the way I wanted to. It may need modifications in future but for now … it just perfect. Humen is a great theme. Providing it free and at the same time providing such awesome support – hats off to you guys.

A suggestion : May be a separate location can be maintained for all the search queries so that it can be easy for bloggers to search their doubt. This will help in stopping some of the basic questions being repeated again and again as bloggers will be able to search to easily.

One simple query – With using the CSS codes / Child theme codes – Does it put load on the site/ makes it slower.

Thank you again. Cheers.

May be a separate location can be maintained for all the search queries

In the header of this page there is a “Search www.ads-software.com” searchbox. You can enter your criteria, like “Hueman header widget” (without the “”) and it will return a list of related topics.

Does it put load on the site/ makes it slower.

Every bit of code that has to be processed has some affect on the response time. However, with the little bit of customization you’ve done here, I doubt that you could even measure the difference.