- This topic has 16 replies, 5 voices, and was last updated 8 years, 3 months ago by
.
-
Posts
-
Hi Sir
How can I create header like this.
http://i.imgur.com/xLmAIH3.jpgI want to create big search bar between Logo (in left) and cart (in right).
Pls help
Regards
Lead Developer
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
- You must be logged in to reply to this topic.
