contain search box in header

[digitalmindParticipant]

Good day,

I am trying to contain the search box within my header. Currently from http://focal-shift.org/organize you will see that the search bar is very random in its responsiveness. How can i ensure that the search bar never “jumps” of out the header, and also remains in header on on 10″ device such as the iPad? Is there somewhere to define the ultimate width of the search box?

Kindest,
Shane

[Ernest MarcinkoKeymaster]

Hi!

It’s been requested a few times so I’m definitely implementing a fixed width option. In some cases I also experienced incorrect width, mainly on header menus. I don’t know yet why it happens, but something is definitely wrong with the width calculation. Anyways, this is going to be changed soon, as the current state still respects IE8, but it’s deprecated, so finally I can remove those thing from the js code. Anyways, with a simple CSS snippet you can force a minimal width on the search bar:

#ajaxsearchpro1_1 {
   min-width: 400px !important;
}

You can put this code anywhere in your stylesheet, or you can use the plugins “Theme Options -> Custom CSS“ tab as well.

• This reply was modified 8 years, 5 months ago by  Ernest Marcinko.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[digitalmindParticipant]

Hi Mr. Marcinko,

This is a very comprehensive plugin and appreciate your effort! Can I also use the same code above to specify a maximum width?

I have a few other questions pertaining to multisite search results from sub site page content but i will start a new thread for those.

Thanks much,
[email protected]

[Ernest MarcinkoKeymaster]

Hi!

Of course you can. But I just realized you have the search placed nicely into a wrapper div element. The search will always adopt to the width of this wrapper elements, so it might be more logical to set the width of this element with css. You can still use the custom css field for that. Based on your site I would suggest something like:

.header-search-wrapper {
    width: 33%;
    min-width: 200px;
    max-width: 400px;
}

So the actual width is given with a percentage value in addition with a minimum/maximum limit.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[digitalmindParticipant]

That worked great! Precisely what i was trying to do. One last question about the header. If you see it now the degradation goes from right to left when I make the window smaller. (which at some points covers the logo). Is it another CSS instruction which would anchor the left side of the search bar 25px from logo and then scale left to right?

If not, or if it is too much of a hassle right now, the help that you have given me in the previous response is FANTASTIC! Thanks again mate.

Shane

[Ernest MarcinkoKeymaster]

No problem at all, I help when I can. If you want and you are satisfied with the product, you can leave a rating on the plugin anytime.

The problem actually is, that the header is made of of 3 blocks. The on on the left contains the logo, the one on the middle contains the menu and the search and the one on the right contains the social stuff. The size ration of these elements as I look at the code is 16.6%, 66.6% and 16,6% so these are responsive, which is great. However the logo inside the first column (16,6%) does not respond to resizing, so the second column (66.6%) covers it when resizing, because the logo passed it’s boundary. This looks like that the search is hovering over the logo, when actually the logo is passing trhough the border of the left column.
Similary you can try a CSS code to make it respond:

#logo img {
   max-height: 70px;
   max-width: 231px;
   min-width: 150px;
   width: 100%;
}

This worked for me nicely on my dev console.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[digitalmindParticipant]

OK,

I implemented the above CSS but didn’t like how it looked in the live environment. I think i will leave it for now and come back to it when we redo all of the headers across the network! 🙂

Thanks again, and I will certainly leave a rating for you in Codecanyon!

As I mentioned earlier in the thread i will be leaving another post for a separate issue in the next few days, but for now I am swamped with company in town and have little time for the site in the next 48 hours.

Cheers, and great great work!

Shane

[Author]

Posts