How to make menu appear on separate row of header

[MTCScreens]

My menu is in the middle of my header on dawn theme, it is a jumbled mess and I would like to place the menu on its own row so all the menu options are lined up full width. you can see it at mtcscreens.com

[Mustafa_Ali]

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
before the body ----->
if this code work please do not forget to like and mark it solution

[MTCScreens]

It kinda worked, I just want it to be on a separate line below the main header. Right now there are too many menu items so it looks cluttered next to the logo. If you have design advice it is appreciated.

[tim_1]

This code can go into “Theme Settings”=> “Custom CSS” or into your stylesheet, if already modified:

@media screen and (min-width: 768px) { 
  header.header {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: self-start;
  }
  
  nav.header__inline-menu {
    order: 1;
    padding-top: 1rem;
  }
  .header__icons {
    padding-top: 0.5rem;
  }
}

But you would need to undo the rule in your layout file:

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account.header--has-localizations {
    display: ruby-text !important;
    padding-top: 3rem !important;
 }

[Made4uo-Ribe]

Hi @MTCScreens

Do you mean like this?

If it is check 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:

header.header {
    display: flex !important;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
} 

nav.header__inline-menu {
    order: 1;
}

h1.header__heading {
    order: 2;
}

.header__icons.header__icons--localization.header-localization {
    order: 3;
}

• And Save.

For smaller screen like tablet it will look like this.

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