[Resolved] How to postion and style search box in Header

Home Forums Support How to postion and style search box in Header

  • This topic has 4 replies, 2 voices, and was last updated 11 months ago by Tom.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1045634
    bluebit

    See my site, I currently have the search box in the nav bar and am trying to move it to the header. I did this by adding a search widget to the header, but the search button has disappeared and I’d like to position the search box closer to the header and make it really long. What css or snippet code do I need to style it?

    Thanks

    #1046102
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this CSS a shot:

    .widget_search .search-submit {
        display: block;
    }
    
    .header-widget form.search-form {
        display: flex;
    }
    
    .inside-header {
        display: flex;
        align-items: center;
    }
    
    .header-widget {
        max-width: none;
        order: 2;
        flex-grow: 1;
        margin-left: 20px;
    }
    
    .header-widget .search-form > label {
        flex-grow: 1;
    }
    
    .header-widget input.search-field {
        max-width: none;
    }

    Depending on your browser compatibility needs, you may want to run the CSS through this tool: https://autoprefixer.github.io/

    #1046172
    bluebit

    that works, but for some reason on my iphone safari browser the search box has rounded corners, how to make the corners not round? On desktop the corners look perfectly fine.

    #1046187
    bluebit

    i think i found a solution:

    input[type=”search”]::-webkit-search-decoration,
    input[type=”search”]::-webkit-search-cancel-button,
    input[type=”search”]::-webkit-search-results-button,
    input[type=”search”]::-webkit-search-results-decoration {
    -webkit-appearance:none;
    }

    input[type=search] {
    -moz-appearance:none;
    -webkit-appearance:none;
    }

    #1046332
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad it’s working 🙂

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