contain search box in header

Home Forums Product Support Forums Ajax Search Pro for WordPress Support contain search box in header

This topic contains 6 replies, has 2 voices, and was last updated by digitalmind digitalmind 7 years, 10 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2669
    digitalmind
    digitalmind
    Participant

    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

    #2673
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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.

    Best,
    Ernest Marcinko

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


    #2675
    digitalmind
    digitalmind
    Participant

    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]

    #2676
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

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


    #2677
    digitalmind
    digitalmind
    Participant

    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

    #2678
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

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


    #2679
    digitalmind
    digitalmind
    Participant

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.