CSS help - Plugin is too big for the space allotted

Hi,

Global Site Search is installed in Toolbar of my site. I shifted from Ajax Search Pro.

It's way too big to fit in the small toolbar. I tried making quick CSS fixes but it's too complicated for my exposure in CSS.

The best it can have is to look like Default Search in my theme (attached screnshot) but that won't be possible with current markup I believe. If you can make it fit in the available space of toolbar, it will serve the purpose.

Can you please help me with css fix.

Thanks

    Adam Czajczyk

    Hello Rohit,

    I hope you're well today and thank you for your question!

    I checked the site and I think what you wish to achieve will be mostly doable, though adding a "Search..." text inside the search box will require some simple additional JS. Let's however start with basic design tweaks.

    Please add following lines to the "style.css" file of your child theme, save it and make sure that you cleared all possible caches.

    /* Global Site Search fixes */
    .widget_global-site-search-widget h3 {display:none;}
    .widget_global-site-search-widget td, .widget_global-site-search-widget tbody, .widget_global-site-search-widget tr, .widget_global-site-search form
    {border:0!important;width:150px!important;}
    .widget_global-site-search-widget input {max-height:25px;max-width:150px;padding:5px;font-size:12px;color:#eee;background:#777;border:0;}

    This is not entire code that I got for you but I wasn't able to get past current heavy/aggressive caching on your site without either disabling cache entirely or editing theme files (which I shouldn't do via support access feature as I wouldn't be able to revert changes) so I'd need to assist you in more then one go.

    Please add that code, make sure that all the caches are cleared and code is applied to the site. You will see that when the "Global Site Search" header goes away, the border around the search field goes away and the search field itself should become smaller and change colors.

    Then let me know please and I'll create another piece of CSS for you.

    Best regards,
    Adam