Navigation Menu on one line without breaking the header

Good morning everyone, i've been finding all the answers for most of my problems on this forym and really wanted to thank all the people that put their knowledge to the service of others. I've been trying different solutions found on the forum but couldn't solve my problem.

The website is here https://turkey-octahedron-8k35.squarespace.com/

and the password is NUMBERNINE

I would like to put the navigation menu on one line and keep everything centered. I thought the problem was solved with this code

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 0 0 93%;
  font-size: 0.5em;
}

but this morning i noticed two things

1) That the header breaks when scaling down the browser as in the attached screenshot.
2) Even at full scale the header is actually uncentered when i look at the social icon.

Can someone help me put the navigation menu on one line and keep everything centered?

Thank you,

Neri

Thank you very much for the explanation! This solved the problem.

Thanks again!

Hello, thanks again, but i see that on the mobile version the logo isn't centered anymore,

Can you help me out?

Thanks again,

Neri

Try replacing the code you have with this:

@media only screen and (min-width:768px) {
  .header-layout-branding-center-nav-center .header-title-nav-wrapper {
     flex: 0 0 93%;
     font-size: 0.5em;
  }
  .header-layout-branding-center-nav-center .header-actions--right {
     flex: 0 1 7%;
     max-width: 7%;
  }
}

By putting the code inside a media query with a min-width the code should only be applied to the desktop view.

Perfect thank you very much!

Hey gang, my website is going onto a section line and proceeding to stack when sized smaller. I would like to avoid it. Sunsetlake.org

3 hours ago, dmharris34 said:

Hey gang, my website is going onto a section line and proceeding to stack when sized smaller. I would like to avoid it. Sunsetlake.org

 

I'm not sure what this means? Can you elaborate? Are you referring to the navigation or buttons? both?

Hey @Ziggy fixing both of would be great. 

The first thing that would help is removing the 226px left/right padding on the header and content. Should be found in the style menu under spacing. I would suggest using something more like the default value of 4vw.

To prevent the button text from stacking you need to make the blocks a little wider on the desktop view.

Hey @Ziggy, 

This is a 7.0 squarespace site. Are you referring to site padding? 

2 hours ago, dmharris34 said:

This is a 7.0 squarespace site. Are you referring to site padding? 

So it is, a rarer and rarer breed these days.

Yes, most likely site padding. What is it currently set to?

@Ziggy The site padding is set to 240px. I have it like that because I like that space on the sides. Makes content easier to read / better for user's. 

A great example of the navigation + buttons not scaling into each other is https://justcreative.com/

When you scale his website, the buttons stay their size and the navigation doesn't start stacking or running into the logo. That's what I desire mine to be.