Header position for Dawn theme. Logo middle position and menu positioned to the left.

Store Design
, , ,

Topic summary

A Shopify store owner using the Dawn theme wants to customize their header layout: logo centered at the top with the navigation menu positioned to the left below it. The default theme settings only allow all elements to be either left-aligned or centered together.

Solutions Provided:

Two community members offered CSS code solutions:

  • CodingFifty provided custom CSS that repositions the header elements and adjusts spacing, with a follow-up code snippet to elevate the logo above the menu on a separate line
  • Made4uo-Ribe shared an alternative CSS approach using CSS Grid template areas to achieve the desired two-row layout

Current Status:

The store owner confirmed Made4uo-Ribe’s solution works perfectly for the layout, but identified a new issue: the header no longer sticks to the top when scrolling. The discussion remains open as this sticky header functionality needs to be resolved.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I am currently setting up my store. I wish to have my header as pictured. I am using the Dawn theme and can not seem to get the logo in the top middle and the menu positioned to the left. Mock up image of what I am after attached. It seems to not let me offset these two. Either all needs to be left or all needs to be centred. Is there something I am missing in the header section that will allow me to do this? Or will I need to write the CSS code? I don’t have experience in coding.

Thanks in advanced.

K

Header.png
Header.png2930×160 12.6 KB

2 Likes
2

Hi,

Thanks for sending this message. I am looking at learning myself and would love some tips to help with this issue? Sorry but at this stage I am not looking to hire anyone on.

Thanks

3

@KGiuffre

Can share store URL i can help you!

Thanks!

4

Hi there,

Thanks so much! At the moment it’s https://ppm4pi-vn.myshopify.com/ haha we are in the middle of migrating! Not as easy to customise but that for reaching out.

K

5

Hi @KGiuffre ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media screen and (min-width: 990px) {
    .header:not(.header--top-center) *>.header__search, .header--top-center>.header__search {
        display: none !important;
    }
    ul.list-menu.list-menu--inline {
    display: flex;
    flex-wrap: inherit !important;
    white-space: pre;
    margin-left: -55px;
}
    .header {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

   .header__menu-item {
    padding: 1.2rem 8px !important;

}
.header--top-center {
        grid-template-areas: "navigation heading icons" !important;
    }
}
1 Like
6

Hi CodingFifty,

You are honestly amazing! Thank you so very much for this!! I can’t believe it! Can I change the code to make the logo higher (above the menu on a seperate line) too?

Honestly I am stoked!

Means a lot as I am trying to get my head around everything in Shopify!

K

7

Hi @KGiuffre ,

You can replace the code you added with this one.

@media screen and (min-width: 990px) {
.header__heading-logo-wrapper {
    padding-bottom: 41px !important;
    margin-top: -46px !important;
}
    .header:not(.header--top-center) *>.header__search, .header--top-center>.header__search {
        display: none !important;
    }
    ul.list-menu.list-menu--inline {
    display: flex;
    flex-wrap: inherit !important;
    white-space: pre;
    margin-left: -55px;
}
    .header {
        padding-top: 40px !important;
        padding-bottom: 15px !important;
    }

   .header__menu-item {
    padding: 1.2rem 8px !important;

}
.header--top-center {
        grid-template-areas: "navigation heading icons" !important;
    }
.scrolled-past-header .header-wrapper {
    margin-top: 70px;
    transition: all 0.3s ease-in;
}
}
1 Like
8

Hi @KGiuffre

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media screen and (min-width: 990px) {
    .header--top-center {
        grid-template-areas:
            "heading heading"
            "navigations icons"!important;
        row-gap: 20px;
    }

    h1.header__heading {
        grid-column: 2;
}

.header__icons.header__icons--localization.header-localization {
    grid-column: 3;
}

nav.header__inline-menu {
    grid-column: 1;
    grid-row: 2;
}
}

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

1 Like
9

This is absolutely spot on! Only thing is now the scroll up isn’t sticking to the top?

Thanks so much again and I can just use the first one if it won’t stick to the top!

K