Barrier for the logo in header (Dawn)

[manbru]

Hello,

Right now my search bar only looks good on my screen size, because my logo in the header does not have this line/barrier for the logo, so on smaller screens the search bar overrides the logo and it looks bad.

So what i would want help with is to get this line that separates the logo in my header.

Take a look at my nonfunctional header, as you can see no line:

And this one that works great:

Here's my store: https://r1vex.myshopify.com/

Thanks for helping! 

[manbru]

Sure this gave the logo a line, but it does not work as a barrier for the search bar and you can see in the pics below that it's still the same.

[sahilsharma9515]

Hi @manbru Thanks for the URL, The barrier you are talking is done with the help of css property as that header contains all the element in 1 div, and then they have added the Flex property.

If you want the same then you need to edit your code so that your search bar and your logo should be under 1 div element and then you can design it with the help of Flex property.

If you want the line then you can add this code, this code will add the visible line.

<style>
h1.header__heading {
    border-right: black 1px solid;
}
</style>

Please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.liquid in the code in left hand side in your theme.
6. Add the following code in the bottom of the file above </body> tag

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil