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

[hip280]

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.

[TheUntechnickle · Accepted solution]

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 🙂

Cheers!
Shubham | Untechnickle

[hip280]

Thank you Shubham, it works well !

[Made4uo-Ribe]

Hi @hip280 

Please, share your store URL. Thanks!

[Eric-HAN]

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

[hip280]

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