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