warehouse theme resize the search bar in header

Solved
Tourist
15 0 0

Hello,

We're looking to resize the search bar  is this possible? Can anyone help?

Thanks, Jimmy.

0 Likes
Shopify Expert
665 170 199

Hi, @xyz ,

This is Evita from On The Map.

 

Yes, it's possible with CSS code. Can you add your store URL, so I can give you the code?

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Tourist
15 0 0

xyzonline.xyz

0 Likes
Tourist
15 0 0

@OTM wrote:

Hi, @xyz ,

This is Evita from On The Map.

 

Yes, it's possible with CSS code. Can you add your store URL, so I can give you the code?

 

Best,
Evita


please let me know when you finish checking my website cause ive to lock it again its under constriction 

thanks in advance 

0 Likes

Success.

Shopify Expert
665 170 199

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code at the bottom of the file.

 

.search-bar {
    max-width: 29rem;
    float: right;
}

You can play with rem as you like, to get the perfect width.

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Tourist
15 0 0

@OTM wrote:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code at the bottom of the file.

 

.search-bar {
    max-width: 29rem;
    float: right;
}

You can play with rem as you like, to get the perfect width.


thanks its working perfectly but can i also remove the sign up and the cart to the left

0 Likes

Success.

Shopify Expert
665 170 199

Sure, add this:

.header__action-item-title.hidden-pocket.hidden-lap {
   display: none!important;
}
.header__action-item--cart {
   display: none!important;
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
15 0 0

@OTM wrote:

Sure, add this:

.header__action-item-title.hidden-pocket.hidden-lap {
   display: none!important;
}
.header__action-item--cart {
   display: none!important;
}

oh sorry i meant move not remove 

0 Likes
Tourist
15 0 0

i made it thanks last thing can i move the currency selector  to be next to the cart and log-in ?

0 Likes