How to make my navigation menu in 1 line? Dawn theme

[IntechCarl]

Hi everyone,

I wanted to make my menu items in 1 line in my navigation mennu and also move the Search,Cart, and log in icon to the right. Is there a way to do it? See photo for reference:

Store Preview Url: https://1r0c4mtux8ldg2yl-13830324282.shopifypreview.com

[B2Bridge]

Hi @IntechCarl , you can follow these steps:

Step 1: Open Online Store -> Themes -> Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

header.header {
 margin: 0 !important;
 min-width: 100% !important;
}
@media screen and (min-width: 990px){
 h1.header__heading > a.header__heading-link {
  margin-left: 0 !important;
}
}

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you 😍

[IntechCarl]

@B2Bridge Thank you for your response, the code works, but I have a question. Can I move the menu items a little bit closer to the search? and also the dropdown arrow seems like it is overlapping with the menu item title? See photo for reference:

[B2Bridge]

Hi @IntechCarl 

I have adjusted the dropdown arrow, and in my opinion, the menu items should be placed next to the logo it looks better that way.

full code is: 

header.header {
 margin: 0 !important;
 min-width: 100% !important;
}
@media screen and (min-width: 990px){
 h1.header__heading > a.header__heading-link {
  margin-left: 0 !important;
}
.list-menu--inline li summary {
   margin-right: 20px !important;
}
summary.header__menu-item.list-menu__item .icon-caret{
 right: -1rem !important;
}
}

 

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you 😍

[IntechCarl]

I just wanted to fill the gaps on the right side of the menu list

[B2Bridge · Accepted solution]

header.header {
 margin: 0 !important;
 min-width: 100% !important;
}
@media screen and (min-width: 990px){
header.header {
 display: flex!important;
    justify-content: space-between!important;
}
 h1.header__heading > a.header__heading-link {
  margin-left: 0 !important;
}
.list-menu--inline li summary {
   margin-right: 20px !important;
}
summary.header__menu-item.list-menu__item .icon-caret{
 right: -1rem !important;
}
}

@IntechCarl 
this is full code, please check it again