How to allow all menu items to show on one line?

[empiricalarby]

https://empiricalwater.com/

I need the maximum width of the menu expanded so that it shows all on one line. I don't want the menu items closer together. Thanks!

Dawn theme

[Kyle_Poieo-Dev]

It's wrapping because of your ".page-width" width element. One quick and dirty fix is go to Online Store > Themes > [...] (Next to Customize button) > Edit Code > template.liquid. Go right below </head> and paste the following code:

<style>
  .list-menu--inline {
    flex-wrap: no-wrap !important;
  }
</style>

Or you can increase the width of your ".page-width" by pasting the following code:

<style>
  .page-width {
    padding: 0 4rem !important;
  }
</style>

 Smaller the number, the less padding, the wider the heading. Let me know if you need help!

[Made4uo-Ribe]

Hi @empiricalarby 

In this case we need to max-width your header. 

It would look like this. 

If its okay to you check this code then.

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

.header--top-center.page-width {
    max-width: 100%;
}

• And Save. 

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

[empiricalarby]

I'd like to edit this separately on desktop and mobile, is that possible? Thanks

[Made4uo-Ribe · Accepted solution]

Yes, sure. Please, replace the code that I give. 

@media only screen and (min-width: 989px){
.header--top-center.page-width {
    max-width: 100%;
}
}

And Save.