Docs

[Pascal]

Hi,

I tried to set the search bar full width and bigger (without border). I was able to make it Wider but unfortunately, making it bigger give me some problem with the search icon.

Here what I did :

Add class to shortcode:

[x_search class=”form-search search-query”]

Added this in CSS

.form-search .search-query, .form-search input[type="search"], {
width: 100%;
display: block;
margin: 0 auto;
}

.form-search .search-query, .form-search input[type="search"], .search-query {
  font-size: 30px !important;
padding-left: 25px;
border: none;
}

How can I fix it?

Thanks

[Pascal]

This reply has been marked as private.

[Pascal]

Hi,

Sorry, Forget my post. I cannot use x-search on this page…

Have a good day!

[Lely]

Cheers Pascal!

Do let us know if you still have questions.

[Pascal]

Hi Lely,

Finally, I’ll need to use to the x_search shortcode and I have some little questions.

1) When adding the shortcode, the search icon did not appears.
2) I would like to remove borders, having the search bar full width and bigger (bigger text to).

How can I achieve this?

Thank you

[Pascal]

This reply has been marked as private.

[Nabeel A]

Hi again,

Please add the following code in your Child Theme’s style.css file:

.x-search-shortcode:before {
    content: "\f002";
    position: absolute;
    color: #000;
    display: inline-block;
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 30px;
    margin-left: 10px;
    margin-top: -2px;
}
.x-search-shortcode {
    position: relative !important;
}
.search-query {
    width: 100% !important;
    height: 50px !important;
    font-size: 30px !important;
    padding-left: 45px !important;
    border: none !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Pascal]

Hi Nabeel,

It work like a charm 🙂

Thanks!

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts