Widget Search Bar Styling

This topic has 5 replies, 2 voices, and was last updated 4 years, 7 months ago by David.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
March 8, 2021 at 10:04 am #1687092

Jordan

Hi,

I would like to make my search bar widget styling in my footer appear like the image at this link:

https://uicookies.com/wp-content/uploads/2019/03/EXPANDABLE-SEARCH-BAR-ANIMATION-html-search-box.jpg

I’ve tried searching your support for this look but can’t quite get it so I removed my custom css and am asking for your help 😉

See my site link in the private info below:

Thanks,
Jordan

March 8, 2021 at 10:27 am #1687134
David
Staff
Customer Support
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;
}
```
March 8, 2021 at 10:55 am #1687175

Jordan

Perfect thank you!!

March 8, 2021 at 12:32 pm #1687237

David
Staff
Customer Support

You’re welcome

March 26, 2021 at 6:23 am #1710578

Jordan

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!!

March 26, 2021 at 7:53 am #1710925
David
Staff
Customer Support
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.
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

[Support request] Widget Search Bar Styling

Popular Articles

[Support request] Widget Search Bar Styling

Popular Articles

Start building better websites today.