Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
Solved! Go to the solution
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.
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!
In this case we need to max-width your header.
It would look like this.
If its okay to you check this code then.
.header--top-center.page-width {
max-width: 100%;
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
I'd like to edit this separately on desktop and mobile, is that possible? Thanks
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025