How do I change the location and width of the search bar?

Store Design
, ,
1

Can’t seem to find the html/css associated with the location of the search bar. I want to have the location of the search bar closer to the name or the logo on the website.

Besides that, I want to find a way to change the dimensions to have the search bar much longer and stretch across the page rather than just a portion of the center.

Here’s my site, any suggestions/answers would be much appreciated.

https://nailsbestbuy.myshopify.com/

2

Hi,
To change the search bar width, please go to Assets/screen.css file and find (ctrl+F) #root #shopify-section-header #search.
Under the #root #shopify-section-header #search tag, please change the maximum width to fit your neeeds as below.

From
max-width: 420px;

To
max-width: 90%;

If you want to move the search bar to other locations, you will need to modify the DOM structure because the search bar is a part of the header.

Hope it helps.
Thanks.

3

Hello @inailuser987 ,

It’s GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1671499741918.png
GemPages_0-1671499741918.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

For example,

GemPages_1-1671499941648.png
GemPages_1-1671499941648.png1912×908 75.9 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

4

Thank you for the solution, it is much appreciated.

Best.

5

The solution is much appreciated, it worked alongside the other one. Thank you so much!

Best

6

Hello @inailuser987 ,

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team

7

In the Spotlight theme there is no Assets/screen.css file, any suggestion? Edit Code > Assets, correct?