[Resolved] Format Search Bar in Footer Widget

[Jeff]

Hi,

I’m building a new site and have added 3 widgets to the footer area. Widgets 1 and 3 are Nav menus and show with a TITLE and the widget title is shown and the bottom border is set to 1px so it appears underlined. These show as I want them to show up.

The problem seems to be when adding the Search to Widget2, it only has an option for Label and not Title. I would like the heading for this section to look the same as the others and push the Search box down to line up with the text from the nav menus if possible. Do you know how I can do this?

.widget-title {
border-bottom: 1px solid #ffffff;
display: inline-block;
width: 95%;
font-size: 16px;
font-weight: bold;
}

Thanks,
Jeff

[Ying]

Hi Jeff,

Try adding this CSS:

.site-footer label.wp-block-search__label {
    border-bottom: 1px solid #ffffff;
    display: inline-block;
    width: 95%;
    font-size: 16px;
    font-weight: bold;
    margin-bottom:30px;
}

[Jeff]

Hi Ying,

Worked perfectly. Thank-you very much!!!

One other question. Is it possible to remove the space between the search box and the blue search button so the are directly side by side (no black between them)?

[David]

Hi there,

add this CSS:

.wp-block-search .wp-block-search__button {
    margin-left: 0;
}

[Jeff]

Thanks David.

You and Ying are awesome! 🙂

[David]

Glad we can be of help

[Author]

Posts