Make the search bar appear over the entire header

[Aramis197793]

Hi,

Please check this site on mobile:
http://www.wildguitars.co.il/

They use your search plugin and when you click on the spyglass icon in the header the search bar and results cover the entire screen.

I tried doing this for my own site but to no avail.

Can you please let me know, which function do I need to use to make sure that the search bar expands over the entire header (right now the search bar width is the same width as the column in which the search icon appears).

Thanks in advance,
Zvi

[Ernest Marcinko]

Hi Zvi,

That feature is added by the theme they are using, or at least it seems to be coming from the theme. Basically the search shortcode is placed into the container which opens then the search icon is clicked. The icon and the container however is not coming from this plugin.

The closest possible feature to that natively is using the compact box layout.

[Aramis197793]

Thanks for the answer.

I tried using this option and added it into the header. However, when I clicked on the search icon the search bar appeared beneath the logo and came outside of the header.

Is there a way to fix this?

Zvi

[Ernest Marcinko]

Well, if the display method is static, then the items are generally pushed in the document.
Try changing the display mode to “absolute” instead. It may still need some custom CSS or some adjustments – as it highly depends on the exact position and the parent items position as well.

[Author]

Posts