Fitting Nav Items on one line

Store Design
, ,
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/

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