Move search bar from header to drawer to the right - Dawn Theme

Hi,

When I click the search icon, the bar opens up on top of the header and I want it to open up on a drawer to the right, just like the cart does. Here’s what I mean:

This is what it currently looks like, which is also glitching with the background!:

This is how I want it to look like. Like the cart that opens up to the right, but I want the search bar to that as well:

Also this other example, where the search bar opens to the right on a drawer:

Hope someone can help me!

Thanks!

Lucy

Hey @lucy_123 ,

Are you familiar with adding CSS to the theme?

Here’s a quick guide.

  1. Head to your Online Store and click “Edit Code”
  2. Search for the “theme.liquid” file
  3. Add the code above “” tag

Here is the code.


Hi thanks so much!

It KINDA worked. This is how it turned out. It is too wide and it is not all the way to right like the cart is! It looks like it’s glitched.

Here is the cart all the way to the right (and narrower)

Hope you can help!

Hey @lucy_123 ,

Can I have the link to your store, The code I gave you worked for me but there might be other customizations you have done that are conflicting, it would be much easier for me to see your store. Without seeing it i’m kinda working blindly. If it’s not live yet, please share the preview link