[Resolved] Add search bar into footer menu

[Anne]

Hello,

I have been trying to add a search bar to the Coach theme for GP, but it looks strange. Do you know what css class I should call or what I should do to make the style fit the rest of the theme, and in particular how to make the search box large enough to be able to see the text when typing in it? I have attached two screenshots of the problem.

Thank you!

[Fernando]

Hi Anne,

You can first add it as such: https://share.getcloudapp.com/9ZugpbmY

Then, you’ll need to change the widths of all Container Blocks of the Grid to give it space. Example: https://share.getcloudapp.com/P8u7qLQe

If you’ll need more change in terms of its looks, we can use custom CSS.

Let us know.

[Anne]

Thanks so much, Fernando!

I’ve inserted it and I think it has enough space (see screenshot attached) but it still looks broken. Any advice on the CSS would be greatly appreciated.

Thank you.

[David]

Hi there,

theres still an issue with the Grid column widths and the 140px column gap.

try this:

1. Select the Grid block and reduce the Column gap to 40px.
2. If you want to keep the bigger space between the columns then select the first column, and give it some right padding eg. 60px. Switch to mobile view and set that padding to 0
3. Now select the second column and increase its % width. You can can go all the way to 40% and keep it in the same row.

For the search block, it does have some stying controls in the editor – select the block and check its toolbar, for example you can swap the Search button for an Icon.

Let us know how the above works out and we can then look at some CSS to pretty it up 🙂

[Anne]

It looks so much better already, thank you!

In terms of style, I’d like the search box to look the same as the one at the top of the front page (see screenshot 1) and the button to look like the “Become a member” one (see screenshot 2).

Many thanks, I really appreciate it!

[David]

Try this CSS:

input[type=search].wp-block-search__input,
input[type=search].wp-block-search__input:focus {
    color: #000;
    background-color: #fff;
    border-radius: 4px;
    font-weight: 400;
    font-size: 15px;
    padding: 12px;
    border: 1px solid #e3e3e3;
    line-height: 1.4;
    margin: 0;
}

button.wp-block-search__button {
    background-color: var(--base-3);
    color: var(--accent);
    padding: 10px 20px;
    border-radius: 2px;
    font-family: Lora, serif !important;
    font-size: 18px;
}
button.wp-block-search__button:hover {
    background-color: var(--base);
    color: var(--contrast-3);
}

[Anne]

Thank you so much! It looks beautiful. I really appreciate your help on this. Many thanks for creating such gorgeous themes, and have a great weekend!

[David]

Super happy to be of help!
Have a great weekend too 🙂

[Author]

Posts