Prevent navigation stacking in two lines

Site URL: https://carlotta-notaro.squarespace.com/

Hello! My site is https://carlotta-notaro.squarespace.com/   Password: mollystupida

My navigation stacks into two lines on smaller screens:

So I used a code from the kind @tuanphan  to un-stack it:

.header-title-nav-wrapper {
  flex: 1 0 85% !important;
  flex-wrap: nowrap !important;
}
.header-nav {
  width: 100% !important;
  flex: 1 1 100% !important;
}

It puts my navigation links in one nice line, but now the links aren't horizontally centered:

I would like to horizontally re-center my navigation links like this:

Do you have any CSS code snippets to re-center my navigation links horizontally, in the middle of the header?

Thanks in advance! 🙂

THANK YOU @tuanphan YOU ARE A GENIUS! It works 🙂

Also thanks for (indirectly) helping me many times during my forum visits 🙂 

Happy Lunar New Year!

On 2/12/2021 at 6:41 PM, tuanphan said:

.header-title-nav-wrapper {
    flex: 1 0 80% !important;
}

When I put this code in it un-centers the entire nav. How can I fix that?

On 9/2/2021 at 11:58 PM, KristenRuthSmith said:

When I put this code in it un-centers the entire nav. How can I fix that?

Hi,

Can you share your site url?

Hello, I am finishing a website, and I am having a similar problem. Below 1500px my menu is on 2 lines.

Do you have a code to avoid this problem? Maybe we should go from a computer menu to a phone menu when viewing the site below 1500px what do you think?

Thank you for your help, attached the screenshots,

the website link: https://elenadellutri.squarespace.com/
password: 5636

On 2/9/2022 at 12:41 AM, Prismaze said:

Hello, I am finishing a website, and I am having a similar problem. Below 1500px my menu is on 2 lines.

Do you have a code to avoid this problem? Maybe we should go from a computer menu to a phone menu when viewing the site below 1500px what do you think?

Thank you for your help, attached the screenshots,

the website link: https://elenadellutri.squarespace.com/
password: 5636

You can consider changing to Burger Menu in specific screen sizes with custom CSS

What do you think? 

Hi there, I am having the same issue as @prismaze, how do I tell it to go to a burger menu below a certain screen size?

On 8/8/2023 at 3:46 AM, kimmydesign said:

Hi there, I am having the same issue as @prismaze, how do I tell it to go to a burger menu below a certain screen size?

Depend on your header layout. What is your site url? We can help easier

Hi! We are also having a problem with our menu (raleighcustomhomes.com) going to two lines when you shrink the window (we are open to it going to a hamburger style menu, or the font size shrinking with window size)- on the right side, our social handles also cross over into our logo in the center - do you know of any way to fix either of those? Thanks!

On 3/4/2024 at 11:33 PM, allieraehay said:

Hi! We are also having a problem with our menu (raleighcustomhomes.com) going to two lines when you shrink the window (we are open to it going to a hamburger style menu, or the font size shrinking with window size)- on the right side, our social handles also cross over into our logo in the center - do you know of any way to fix either of those? Thanks!

You can use this code to Website > Website Tools > Custom CSS

nav.header-nav-list {
    flex-wrap: nowrap;
}

On 3/7/2024 at 2:18 AM, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

nav.header-nav-list {
    flex-wrap: nowrap;
}

Hey @tuanphan - I want to do this for my client's website medium - rare . com , but I don't want it to overlap with the logo. Is there a way to balance this so that when it hits the centered logo it just converts to the hamburger menu? 

3 hours ago, Trentwann said:

Hey @tuanphan - I want to do this for my client's website medium - rare . com , but I don't want it to overlap with the logo. Is there a way to balance this so that when it hits the centered logo it just converts to the hamburger menu? 

Yes. We can force burger on specific screen size. You can share site url, I can check & adjust CSS easier.