Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 26, 2018 at 4:33 pm #947344
    hazelallturf

    Hi,

    Please can you advise as to how I would change the CSS for my full search bar in my header.

    I am looking for it to look like http://www.wayfair.co.uk/

    Many thanks,

    Luke

    April 26, 2018 at 10:02 pm #947476
    Jordan Shannon

    Hey hazelallturf,

    Add this to quick css. These are the styles I pulled from that site, and it can be modified to fit your style.

    #searchform input{
    width: 100%;
    height: 40px;
    padding: 0 45px 0 15px;
    border: 2px solid hsla(0,0%,87%,.9)!important;
    border-radius: 3px;
    text-overflow: ellipsis;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transform: translateZ(0);
    background:transparent!important;
}

#searchsubmit.button.avia-font-entypo-fontello{
width: 40px;
    height: 100%;
    line-height: 40px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    margin: 0;
    border-radius: 0;
    min-width: 40px;
}

.header_color .button, .header_color #submit, .header_color input[type='submit']{
    background-color: transparent!important;
    color: #000!important;
    border-color: hsla(0,0%,87%,.9)!important;
}

    Best regards,
    Jordan Shannon

    April 26, 2018 at 11:48 pm #947530
    hazelallturf

    Hi Jordan,

    That’s starting to look great.

    How would I make the search bar wider?

    How would I change the placeholder from ‘Search’?

    Many thanks

    April 27, 2018 at 12:03 am #947532
    hazelallturf

    This is the other CSS I have for that search widget.

    /* Centre the header search widget */
    #header .widget {
    left: 45%;
    padding-top: 35;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    z-index: 999;
    }

    April 27, 2018 at 3:39 pm #947998
    hazelallturf

    Hi Jordan,

    Can I also ask how to remove the search bar on mobile? Maybe replace this with the standard search icon?

    Thanks

    April 27, 2018 at 7:52 pm #948134
    Jordan Shannon

    Hi,

    Add this to quick css:

    @media only screen and (max-width: 767px)  {
#search-3{
display:none!important;
}
}

    Best regards,
    Jordan Shannon

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