Archived topic

Format Search Bar in Footer Widget

5 replies · Started by Jeff on January 23, 2023

Viewing posts 1–6 of 6

January 23, 2023 at 1:40 pm #2506375

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

January 23, 2023 at 2:38 pm #2506436

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;
}

January 24, 2023 at 5:07 am #2506992

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)?

January 24, 2023 at 6:50 am #2507124

Hi there,

add this CSS:

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

January 24, 2023 at 7:09 am #2507143

Thanks David.

You and Ying are awesome! :)

January 24, 2023 at 7:38 am #2507179

Glad we can be of help

This archived topic is closed to new replies.

Start building better websites today.