Fitting Nav Items on one line

Store Design
, ,

Topic summary

A user needs help fitting all navigation menu items on a single line in their Shopify store header. CSS edits aren’t reflecting changes on the preview site.

Multiple solutions proposed:

  • Modify flex-wrap property: Change flex-wrap: wrap to flex-wrap: nowrap in the .list-menu--inline class, either in header.liquid or CSS files. Add white-space: nowrap to prevent text wrapping.

  • Adjust header width: Set header.header to max-width: 100% or max-width: unset !important in base.css, style.css, or theme.css files.

  • Combined approach: Apply both flex-wrap changes and header width adjustments together, wrapped in a media query for screens wider than 769px.

All respondents provided code snippets and screenshots showing the navigation items successfully displayed on one line. The issue remains unresolved as the original poster hasn’t confirmed which solution worked.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,

Client wants all current items to fit on one line for the nav menu. I have tried editing CSS but for some reason I am not seeing the changes reflected. Here is the preview for the site, all help is appreciated in advance thank you!

https://josecruzproductions.myshopify.com/

1 Like
2

Hi @jcovo ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media (min-width: 769px){
.list-menu--inline {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: pre;
}
header.header {
    max-width: 100% !important;
}
}

CodingFifty_0-1738598225131.png
CodingFifty_0-1738598225131.png1525Ă—617 176 KB

3

Hello @jcovo

Follow this steps:

1.Go to edit tab

  1. Find header.liquid file and below code:
.list-menu--inline {
    display: inline-flex;
    flex-wrap: wrap;
  }
  1. Replace previous code with below code.
.list-menu--inline {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}
  1. Click on save.

Result:

PritTala_0-1738598096690.png
PritTala_0-1738598096690.png1340Ă—581 386 KB

4

Hi @jcovo

You can make max-width so it will fit.

  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 {
    max-width: 100%;
}

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

5

Hi @jcovo

I hope you are well. You can follow our instructions below:1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
header.header {
    max-width: unset !important;
}
{% endstyle %}

DaisyVo_0-1738599914462.png
DaisyVo_0-1738599914462.png1919Ă—456 188 KB

Please let me know if it works. Thank you!Best,
Daisy - Avada Support Team