Custom Search in Header

[Carol]

I love this theme~! I’ve been looking for something like this for a while.

Question: Can you please explain why using a CSS plugin isn’t good to do along side GP?

Does it make the GP run slower or something?

I’m new to all this, so really want to know.

In header, I’d love to have my logo to the left, nav. menu in the middle, and custom search field to the right in header.

I can build this, (except for blue icon), with the CSS plugin I have, but not in the header where I want it – just in sidebar or elsewhere.

Hate to bug you guys, but truly wondering if I should just delete my CSS plugin or if it’s okay to use.

Thanks for all the help.

Fantastic theme and exceptional support!

Carol

X80Ws+031v45

[David]

Hi there,

Some people have great experiences with them, others do not.
My concern is the plugin adds extra code in order to add the CSS. Which is a bit overkill if you’re only looking to make a few styling changes.

If you want we’re more then happy to provide some CSS to create the style you’re looking for.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carol]

Thanks for the reply.

Would it be difficult to put that search above to the right of the nav menu?

If not, no worries.

Thank you.

[David]

You could add the search widget to the Customizer > Widgets > Header Widget.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carol]

That’s a great idea.

I did that.

Now, how to get the nav. menu center on header?

Thank you so much!

[David]

Add this CSS:

.inside-header {
    display: grid;
    grid-template-columns: auto auto;
    justify-items: end;
}

.site-logo {
    justify-self: start;
}

Then try this CSS for styling the search widget – adding the search icon isn’t really possible with the standard WP search widget:

.search-form {
    display: flex;
}

.search-form>* {
    border-radius: 50px;
}

.header-widget {
    border-radius: 50px;
    background-color: #eee;
    padding: 5px;
}

.nav-float-right .header-widget .widget {
    padding-bottom: 0;
}

.search-form input.search-field {
    border: none;
    background-color: transparent;
    color: #000;
}
.search-form input[type=submit], input[type=search] {
    padding: 2px 15px; 
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carol]

Thanks.

“Unknown property” in code.

1) How to put Nav. menu center on same line as logo?

2) Search style change

– When entering text in search, text is white – needs to be black.

– Height of search needs to be much less, maybe 60% of what’s there.

– Don’t want search gold button or any image unless a little icon.

– Can you add a magnifying glass?

Thank you very much.

[David]

You can ignore those two warnings in the additional CSS – WordPress uses an old CSS lint which doesn’t do CSS Grid properties.

I adjusted the CSS above to make those changes. The button uses the Customizer > Colors > Buttons settings.

Adding an icon is not possible with the standard WP search widget unfortunately.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carol]

Okay, will ignore that message. Thank you!

Still would like to…

1) Don’t want any search button at all.

2) Search field not as wide – decrease by about 1/4 (more like image example).

3) Drop shadow and blur like image sample of blue search?

3) ** Nav. menu still isn’t centered – it’s broken to the next line.

Thank you so much.

[David]

I edited the CSS above to remove the button.
The Nav looks ok to me – its inline with the logo ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carol]

Thanks.

I was editing my message above as you were posting. 😉

This is my view:

Nav. menu still on second line…

I know this is nitpicky, but can the Search word have no elipses? lol

Thank you so much!!!

I can wait on this…no hurry at all.

[David]

So do you want the logo – nav – search all in the inline ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carol]

Yes.

logo left, nav. menu center, search on the right.

Thanks.

[David]

Ok totally misread that 🙂
So replace the first part of the CSS with this:

.inside-header {
    display: flex;
    align-items: center;
}
.header-widget {
    order: 5;
    top: unset !important;
}

.main-navigation {
    margin-left: auto;
    margin-right: auto;
}

To reduce the width of the search field try this:

.widget .search-field {
    max-width: 15ch;
}

CH unit is characters so that would be 15 text characters wide.

Box shadow will need to be applied to the header-widget eg.

.header-widget {
    box-shadow: 0 2px 10px  3px rbga(0,0,0,0.5);
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carol]

David! My nav. menu is center on same line with logo! Yay!! 🙂 Thank you!

* I don’t know where to put that code for “header widget”…I don’t think I have a header widget.

This is my view:

Could we tweak search a bit when you’re not too busy?

1) Search field thinner – lessen height (like blue example pic)

2) Remove elipses

3) Font size of “Search” smaller, maybe by 2pt, and bold

4) Background of search field white w/ drop shadow and blur/spread to mimic sample image. Color of blur is: #CDE1F2 (So technically, there’s no border, but the border will be the shadow/blur because the bg is white.)

No hurry at all. Thank you very much!!!

Carol

[Author]

Posts