Search Box in Header

[Ayoade]

Now that we have a header option that allows a banner or any code, is it possible to add the KLEO search box in the header?

I have tried using the KLEO shortcode for side menu but the search box appears too large. How can I achieve this?

[Laura]

Hello, you could add it and i can help you fix the styling issues 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Ayoade]

Okay thanks. I have added the search box now. Kindly help me style it.

Username – Ayoade
Password – ahmed310815
Login – https://www.afrimash.com/wp-admin/

FTP Hostname – c26529.sgvps.net
Password – afrimash310815

I look forward to your help asap. Thanks.

[Laura]

Hello, changed a couple things, let me know if you want any specific style, you can share screenshots or anything that helps 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Ayoade]

Great job!

Thank you for helping. I would actually prefer a slimmer search box like the one on eBay – http://www.ebay.com/.

[Laura]

Hello, try adding this to style.css of child theme

COPY CODE

.kleo-search-form #searchform .input-lg {
    height: 33px !important;
    border-radius: 0px !important;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    background-color: #fff;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Laura]

Hello, try adding this to style.css of child theme

COPY CODE

.kleo-search-form #searchform .input-lg {
    height: 33px !important;
    border-radius: 0px !important;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    background-color: #fff;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Ayoade]

Excellent work Laura! I really appreciate this.

[Laura]

Happy to help! 🙂 If you can rate us 5 stars at themeforest, that would help a lot 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Ayoade]

Okay, I have. Thanks again.

[Laura]

Thanks you very much!

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Ayoade]

Hi Laura,

After updating to the new version of Kleo, I lost the styling for the KLEO search box (attached). Could you please help me out?

[Laura]

Hello, adding the code again doesn’t fix it?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Ayoade]

It does not fix it. I have tried that and cleared the cache. Here’s the code I used:

COPY CODE

.kleo-search-form #searchform .input-lg {
    height: 36px !important;
    border-radius: 8px !important;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    background-color: #fff;
}
.kleo-search-form #searchform .input-group-btn {
    position: absolute;
    right: 26px;
    top: 15% !important;
}
.kleo-search-wrap.kleo-search-form.search-style-default {
    margin-top: 1%;
}

[Laura]

Hello, can you share ftp access? I will try to add it directly and see if it works

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Laura]

Also try adding it to quick css at theme options

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Ayoade]

Username – Ayoade
Password – ahmed310815
Login – https://www.afrimash.com/wp-admin/

FTP Hostname – c26529.sgvps.net
Username – Woculu5
Password – afrimash310815

I have tried adding it to Quick CSS …not working. Kindly take a look for me. Thanks.

[Laura]

Hello, please try this

COPY CODE

input#s {
    height: 40px !important;
}

Let me know if it works now 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Ayoade]

Great! This worked.

Only one issue is left …the background of the search box turns green when I click on it instead of white (as seen in the picture attached).

Can you help me make the background white after clicking? Thanks.

[Laura]

Hello 🙂 this should fix that

COPY CODE

input#s:focus {
    background: white !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Ayoade]

Excellent, problem solved! Many thanks to you Laura.

[Laura]

Always happy to help 🙂

If you didn’t already please rate us 5 stars at themeforest 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts