Archived topic
Big search bar in center in header
16 replies · Started by Dhruv on August 6, 2015
Hi Sir
How can I create header like this.
http://i.imgur.com/xLmAIH3.jpg
I want to create big search bar between Logo (in left) and cart (in right).
Pls help
Regards
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>
Thanks Tom. You are Genius :)
But how can I increase width of search form ?
Is this code okay ?
input[type="search"] {
box-sizing: content-box;
width: 500px;
}
This might be better:
.site-header input[type="search"] {
box-sizing: content-box;
width: 500px;
}
Thanks Sir
No Problem :)
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?
Any examples of what you're trying to do?
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.
Worked perfectly! Thanks!
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 :)
Worked nicely. Thank you!
You're welcome :)
Hi Tom,
Where abouts would I put this code? Which hook do I use to replace the default header on every page?
Thanks