Solved

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

thingsontheway
Tourist
37 0 3

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.

thingsontheway_1-1716898684724.png

 

 

 

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

Theme: Dawn

 

Thank you for your time and assistance. 🙂 

 

 

Accepted Solutions (2)

Made4uo-Ribe
Shopify Partner
6383 1533 1902

This is an accepted solution.

Hi @thingsontheway 

Do you mean like this?

Made4uoRibe_0-1716904058743.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Made4uo-Ribe
Shopify Partner
6383 1533 1902

This is an 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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
6383 1533 1902

This is an accepted solution.

Hi @thingsontheway 

Do you mean like this?

Made4uoRibe_0-1716904058743.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
thingsontheway
Tourist
37 0 3

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

 

thingsontheway_0-1716904575989.png

 

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

Made4uo-Ribe
Shopify Partner
6383 1533 1902

This is an 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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
thingsontheway
Tourist
37 0 3

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

Made4uo-Ribe
Shopify Partner
6383 1533 1902

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.