Search box compact mode expanding

[martyp187Participant]

Hi, I am trying to put a compact mode search box into either our header menu or top bar menu (We are usign the X theme from ThemeCo)
If you look at the url supplied, you can see this is showing up in both locations using a shortcode, but when you click on the search icon, the search input box only ever expands a few pixels. I see the same thing if I set a fixed pixel width for the search input box in the settings too.
Any ideas on the correct setting or css hack to allow this to expand and push either menus to the left?

Thanks for your help!

Martyn

[Ernest MarcinkoKeymaster]

Hi!

Thank you for the credentials, I was able to check your configuration and I found the problem.

The final width of the compact box was set to 100%, which means it fits the containing element, but in your case it was only a few pixels wider.
I have set that option to 250 pixels, now it should expand to that width instead. You can change that on the Layout Options -> Compact box layout panel: https://i.imgur.com/0ByWZ7Y.png

Plus I have noticed that the vertical alignment of the box wasn’t optimal, so I have added these custom CSS rules to the search options to correct that as well:

#ajaxsearchpro3_1 {
   vertical-align: bottom;
}

#ajaxsearchpro3_2 {
   margin-top: 10px;
}

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

[Author]

Posts