Widget Search Bar Styling

Hi there,

try this CSS:

.widget .search-form {
  border-radius: 50px;
  overflow: hidden;
  padding: 4px;
  background-color: #fff
}
.widget .search-form label {
  margin-bottom: 0;
}
.widget .search-form button.search-submit {
  font-size: 15px;
  border-radius: 50%;
  padding: 0 15px
}
.widget .search-form input {
  border: none;
}

Perfect thank you!!

You're welcome

Hi Again,

I noticed this search styling is working except gets a little funky when you select a responsive view for mobile - the gray icon shifts to the left. See the search bar in the footer of this link: and then make the viewport responsive for mobile to see what I mean. How can this be fixed?

Also, in the same footer any tips on how to get the Logo and social widgets to align in the mobile responsive view as well? They are in the footer widget 1 area.

Thanks!!

Try changing this CSS to:

.widget .search-form label {
    margin-bottom: 0;
}

to:

.widget .search-form label {
    margin-bottom: 0;
    flex: 1;
}

Could you raise a separate topic regarding the social icons and logo.