Site logo

Archived topic

Big search bar in center in header

16 replies · Started by Dhruv on August 6, 2015

Viewing posts 1–15 of 17

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

This archived topic is closed to new replies.