- This topic has 16 replies, 5 voices, and was last updated 5 years, 1 month ago by
Leo.
-
AuthorPosts
-
August 6, 2015 at 9:32 pm #127240
Dhruv
Hi Sir
How can I create header like this.
I want to create big search bar between Logo (in left) and cart (in right).
Pls help
Regards
August 6, 2015 at 11:23 pm #127251Tom
Lead DeveloperLead DeveloperYou 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-developmentAugust 7, 2015 at 5:59 am #127322Dhruv
Thanks Tom. You are Genius π
But how can I increase width of search form ?August 7, 2015 at 6:11 am #127323Dhruv
Is this code okay ?
input[type=”search”] {
box-sizing: content-box;
width: 500px;
}August 7, 2015 at 9:17 am #127377Tom
Lead DeveloperLead DeveloperThis 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-developmentAugust 7, 2015 at 11:22 am #127421Dhruv
Thanks Sir
August 7, 2015 at 11:23 am #127422Tom
Lead DeveloperLead DeveloperNo Problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 15, 2016 at 2:01 pm #172955Chris
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?
February 15, 2016 at 6:17 pm #173000Tom
Lead DeveloperLead DeveloperAny 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-developmentFebruary 16, 2016 at 11:04 am #173165Tom
Lead DeveloperLead DeveloperTry 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-developmentFebruary 16, 2016 at 5:02 pm #173228Chris
Worked perfectly! Thanks!
February 16, 2016 at 10:44 pm #173262Tom
Lead DeveloperLead DeveloperYou’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-developmentFebruary 18, 2016 at 8:53 am #173628Chris
Worked nicely. Thank you!
February 18, 2016 at 10:17 am #173648Tom
Lead DeveloperLead DeveloperYou’re welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentDecember 8, 2017 at 2:19 pm #445182Steve
Hi Tom,
Where abouts would I put this code? Which hook do I use to replace the default header on every page?
Thanks
-
AuthorPosts
- You must be logged in to reply to this topic.