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

Solved

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

empiricalarby
Trailblazer
230 1 52

https://empiricalwater.com/

 

Screenshot 2024-07-10 121824.png

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

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
9870 2351 2947

This is an 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. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 4 (4)

Kyle_Poieo-Dev
Shopify Partner
54 6 9

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!

-

Need a Shopify developer? Send me an Email


- CEO & Lead Developer at Poieo Dev
- Shopify Design Changes | Shopify Custom Coding | Custom Modifications | SEO | E-Commerce Management
Poieo Dev

Made4uo-Ribe
Shopify Partner
9870 2351 2947

Hi @empiricalarby 

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

It would look like this. 

Made4uoRibe_0-1720641415754.png

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
empiricalarby
Trailblazer
230 1 52

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

Made4uo-Ribe
Shopify Partner
9870 2351 2947

This is an 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. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.