Dawn theme - How to have main menu on a different line as the logo

Shopify Discussion
1

Hi am using the dawn theme, can anyone advise how can I have the menu on a different line as the logo ?

Would like to do something as shown below, the 1st pic shows the default dawn theme, the second pic shows what I am trying to get. Thank you.

1.jpg
1.jpg1223Ă—210 19.3 KB

2.jpg
2.jpg1226Ă—210 19.4 KB

2

Hey @hip280 ,

There you go → 

.header__inline-menu {
  margin-top: 20px;
  border-top: 1px solid rgba(var(--color-foreground), 0.08);
  padding-top: 10px;
}

@media screen and (min-width: 990px) {
  .header {
    display: block !important;
  }
  
  .header__inline-menu {
    margin-top: 15px;
  }
}

Add this code to your theme’s custom CSS. You can do this by:

  1. Going to Theme > Customize
  2. Scroll down to “Custom CSS” in the left sidebar
  3. Paste the code above
  4. Click “Save”

Or you can directly paste this code in base.css file

This will:

  • Move the menu below the logo
  • Add a subtle separator line
  • Maintain responsive behavior on mobile devices
  • Keep the search, account, and cart icons in their original position

You can adjust the margin-top values to increase/decrease the space between the logo and menu if needed.

Let me know if you need any other help, or want us to do this for you :slightly_smiling_face:

Cheers!
Shubham | Untechnickle

3

Hi @hip280

Please, share your store URL. Thanks!

4

Hi， there

Go to the online store ->Theme ->Customise. ,select the header part ,and change the conf of Desktop of logo position .see the pic below

EricHAN_0-1733730549743.png
EricHAN_0-1733730549743.png656Ă—1008 50.1 KB

5

Thank you Shubham, it works well !

6

Ah yes, by moving logo position, this also moves the menu bar down. Thank you.