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

Store Design
, , ,
1

  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
thingsontheway_1-1716898684724.png1753×259 21.2 KB

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

Theme: Dawn

Thank you for your time and assistance. :slightly_smiling_face:

1 Like
2

Hi @thingsontheway

Do you mean like this?

Made4uoRibe_0-1716904058743.png
Made4uoRibe_0-1716904058743.png1301×300 240 KB

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 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!

1 Like
3

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

thingsontheway_0-1716904575989.png
thingsontheway_0-1716904575989.png1401×262 39.5 KB

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

4

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

5

Ops, my bad forgot to add the style tag.

And Save.

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

1 Like
6

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

1 Like