How can i change the size of the search box and also change the search background colour?

Store Design
1

Hi There,

I am trying to make the search bar bigger so it is longer on the website. only the length of it.

I am also tryingot change the background of the search bar colour to match the top bar and also the text icons, (where it says free delivery over £30)

anyone know how here is my website : https://mistervape.co.uk/

Screenshot 2023-01-18 at 12.52.03.png
Screenshot 2023-01-18 at 12.52.03.png2780×630 214 KB

here is a picture of the issue i’m trying to

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
.header__search-bar {
background-color: #ebedf3;
}
1 Like
3

@ZestardTech thats great, how would i make it a little bigger so the search bar goes wider?

4

@mistervape

Hi,

Please add the code below to make the search bar bigger and background color at the bottom of Assets > kubix.scss file.

@media screen and (min-width: 1000px) {
  .header__search-bar {
    background-color: #ebedf3 !important;
    width: 50%;
  }
  .header__logo, .header__search-bar, .header__secondary-links {
    flex: auto !important;
  }
}

Please change the width to fit your needs.

Hope it helps.

1 Like
5

@mistervape
can you put css into theme.css file

@media (min-width:1025px)
{
.header__wrapper {
    display: block !important;
    align-items: center !important;
    padding: 20px 0 !important;
}

.header__icon-list {
    margin-top: -20px !important;
}

.header__search-bar.predictive-search.hidden-pocket {
    width: 640px !important;
    margin-top: -59px;
    margin-left: 30%;
    background-color: #ebedf3;
}
}

Ujjaval_0-1674048362399.png
Ujjaval_0-1674048362399.png1600×753 311 KB

1 Like
6

Hi @mistervape ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

@media screen and (min-width: 1200px) {
    .header__logo {
        flex: 250px !important;
    }
    .header__search-bar {
        flex: 50% !important;
/*         change background color here */
        background: #ebedf3;
    }
    .header__secondary-links {
        flex: 100px !important;
    }
}

I hope it would help you

1 Like
7

@Ujjaval @PageFly-Kate @DavidEKim @ZestardTech

Thanks everyone, got that sorted.

1 Like
8

Hello @mistervape

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.