Big search bar in center in header

[Dhruv]

Hi Sir

How can I create header like this.

View post on imgur.com

I want to create big search bar between Logo (in left) and cart (in right).

Pls help

Regards

[Tom]

You could use GP Hooks to add the HTML/PHP in, and then you would have to use CSS to style it.

Your hook content would look something like this:

<div class="grid-20">
      Logo in here
</div>
<div class="grid-60">
      <?php get_search_form(); ?>
</div>
<div class="grid-20">
      Other stuff in here
</div>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dhruv]

Thanks Tom. You are Genius 🙂
But how can I increase width of search form ?

[Dhruv]

Is this code okay ?

input[type=”search”] {
box-sizing: content-box;
width: 500px;
}

[Tom]

This might be better:

.site-header input[type="search"] {
      box-sizing: content-box;
      width: 500px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dhruv]

Thanks Sir

[Tom]

No Problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chris]

Is there a way to size and float the Search Box (aligned to the right) over the header image so it’s near the upper-right area of the header?

[Tom]

Any examples of what you’re trying to do?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Tom]

Try this:

1. Add the search widget into the “Header” widget area in “Appearance > Widgets”.

2. Add this CSS:

.inside-header {
    position: relative;
}

.header-widget {
    position: absolute;
    top: 10px;
    right: 10px;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

You might need to adjust the positioning a bit.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chris]

Worked perfectly! Thanks!

[Tom]

You’re welcome!

As for your email, you can style the search field like this:

.header-widget .search-field {
    font-size: 15px;
    padding: 10px;
}

Add as much CSS in there as you like 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chris]

Worked nicely. Thank you!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Steve]

Hi Tom,

Where abouts would I put this code? Which hook do I use to replace the default header on every page?

Thanks

[Author]

Posts