[Resolved] Custom Search in Header

Home Forums Support Custom Search in Header

  • This topic has 19 replies, 3 voices, and was last updated 1 year ago by David.
Viewing 5 posts - 16 through 20 (of 20 total)
  • Author
    Posts
  • #1027903
    David
    Staff
    Customer Support

    Ok so replace all of the old CSS with this:

    /*-- Navigation Alignment CSS --*/
    .inside-header {
        display: flex;
        align-items: center;
    }
    .header-widget {
        order: 5;
        top: unset !important;
    }
    
    .main-navigation {
        margin-left: auto;
        margin-right: auto;
    }
    
    /*--  Search Form Styling --*/
    .search-form {
        display: flex;
    }
    
    .search-form>* {
        border-radius: 50px;
    }
    
    /* Style search field */
    .widget .search-field {
        max-width: 20ch;
        font-size: 16px;
        text-transform: lowercase;
        font-weight: bold;
        border: none;
        background-color: transparent;
        color: #000;
        padding: 2px 7px;
    }
    
    /* Add radius and Shadow */
    .header-widget {
        border-radius: 50px;
        background-color: #fff;
        padding: 5px;
        box-shadow: 0 6px 25px -5px rgba(40, 100, 255, 0.25);
    }
    
    .nav-float-right .header-widget .widget {
        margin-bottom: 0 !important;
        padding-bottom: 0;
    }
    #1027909
    Carol

    Thanks, David!

    A few issues:

    1) Can’t see text as you type. The text is white/invisible as you’re typing search term – white/white = invisible. But when you hit enter, it appears suddenly black.

    2) Elipses are still there – can we delete them?

    3) I’m trying to increase max width of search, and it won’t respond when I get to a certain number. Want to try 50ch, but it’s not responding.

    I really appreciate it!

    #1028589
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. Try adding this:

    .header-widget .search-field:focus {
        color: #000;
    }

    2. Add this PHP:

    add_filter( 'generate_search_placeholder', function() {
        return 'Search';
    } );

    3. Where you specify the width, try this instead:

    width: 20ch;
    max-width: 100%;
    #1028602
    Carol

    Absolutely phenomenal support for this theme – I love it!

    Thank you very much!

    #1028833
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 5 posts - 16 through 20 (of 20 total)
  • You must be logged in to reply to this topic.