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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Ayoade]

This reply has been set as private.

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[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 Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[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 Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

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

Attachments:

You must be logged in to view attached files.

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[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 Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Ayoade]

This reply has been set as private.

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[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.

Attachments:

You must be logged in to view attached files.

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts