Repositioning Logo & Centering Search Box and addition of a divider line

[thingsontheway]

1) I'm trying to customize my header layout on desktop. I'd like to position the logo on the left side and center the search box. While I've made some adjustments in the Shopify theme editor, it seems to be causing unintended layout issues with other header elements. Could someone offer some guidance on achieving this layout change?

2) I'd like to explore adding a subtle black divider line(for both desktop and mobile versions). Would there be a recommended approach to achieve this within the theme editor, or perhaps a specific CSS code snippet that could be implemented?

To provide a clearer visual representation of my request, I've attached an image highlighting the desired layout changes. Specifically, it showcases the logo positioned on the left and the search box centered, with a black divider line separating the header from the content below.

Website: https://hamperpick.myshopify.com/

Theme: Dawn

Thank you for your time and assistance. 🙂 

[Made4uo-Ribe · Accepted solution]

Hi @thingsontheway 

Do you mean like this?

If it is check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

@media only screen and (min-width: 990px){
.header .header__heading {
     grid-column: 1 !important; 
     display: flex !important;
}
.desktop-search {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.header__inline-menu {
    border-top: 3px solid black;
    padding-top: 1rem;
}
}

And Save, 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Made4uo-Ribe · Accepted solution]

Hi @thingsontheway 

Do you mean like this?

If it is check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

@media only screen and (min-width: 990px){
.header .header__heading {
     grid-column: 1 !important; 
     display: flex !important;
}
.desktop-search {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.header__inline-menu {
    border-top: 3px solid black;
    padding-top: 1rem;
}
}

And Save, 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[thingsontheway]

Thank you for responding. I tried this piece of code but it didn't change any thing.

Also, after I updated the file, the code looks unformatted. Is it something I am doing wrong?

[Made4uo-Ribe · Accepted solution]

Ops, my bad forgot to add the style tag. 

<style>
@media only screen and (min-width: 990px){
.header .header__heading {
     grid-column: 1 !important; 
     display: flex !important;
}
.desktop-search {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.header__inline-menu {
    border-top: 3px solid black;
    padding-top: 1rem;
}
}
</style>

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[thingsontheway]

never mind. I figured it out. Thank you for the help. Much appreciated your time. 🙂

[Made4uo-Ribe]

Sorry for delay, im reply another post. Good to hear that. Welcome. 😊