Search Box in Header

Home Forums KLEO Theme options & Demo content Search Box in Header

This topic has 21 replies, 2 voices, and was last updated 6 years by Laura.

  • Author
  • July 3, 2017 at 15:46 #165974
     Ayoade
    Participant

    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?

    July 3, 2017 at 20:03 #166066
     Laura
    Moderator

    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 🙂

    July 4, 2017 at 14:15 #166218
     Ayoade
    Participant
    This reply has been set as private.
    July 4, 2017 at 15:25 #166236
     Laura
    Moderator

    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 🙂

    July 4, 2017 at 17:05 #166256
     Ayoade
    Participant

    Great job!

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

    July 4, 2017 at 17:28 #166262
     Laura
    Moderator

    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 🙂

    July 4, 2017 at 17:28 #166263
     Laura
    Moderator

    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 🙂

    July 6, 2017 at 10:57 #166474
     Ayoade
    Participant

    Excellent work Laura! I really appreciate this.

    July 6, 2017 at 19:00 #166537
     Laura
    Moderator

    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 🙂

    July 28, 2017 at 16:45 #168847
     Ayoade
    Participant

    Okay, I have. Thanks again.

    July 29, 2017 at 18:52 #168964
     Laura
    Moderator

    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 🙂

    April 4, 2018 at 22:14 #193847
     Ayoade
    Participant

    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.
    April 5, 2018 at 13:21 #193882
     Laura
    Moderator

    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 🙂

    April 5, 2018 at 13:38 #193889
     Ayoade
    Participant

    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%;
}
    April 8, 2018 at 20:01 #194155
     Laura
    Moderator

    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 🙂

    April 8, 2018 at 20:01 #194156
     Laura
    Moderator

    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 🙂

    April 9, 2018 at 21:37 #194256
     Ayoade
    Participant
    This reply has been set as private.
    April 11, 2018 at 01:57 #194341
     Laura
    Moderator

    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 🙂

    April 11, 2018 at 12:49 #194380
     Ayoade
    Participant

    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.
    April 11, 2018 at 20:24 #194450
     Laura
    Moderator

    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 🙂

    April 11, 2018 at 23:37 #194459
     Ayoade
    Participant

    Excellent, problem solved! Many thanks to you Laura.

    April 13, 2018 at 02:25 #194553
     Laura
    Moderator

    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
Viewing 22 posts - 1 through 22 (of 22 total)

You must be logged in to reply to this topic.

Support Hours Our support team is available from Monday to Friday during regular office hours ( East European Time ). Please allow up to 48hrs so we can review your request and respond.
License info One theme purchase allows you to use it only on one WordPress install, so each new install requires a new license. We thank and appreciate everyone for their purchase as it allows us to keep supporting and releasing new updates.
wp-theme-installation-service

©2024 SeventhQueen - Powered by KLEO Theme

Terms & conditions | Privacy Policy

Log in with your credentials

Forgot your details?