Navigation bar appearing over 2 lines on desktop.

Hello,

I'm having trouble getting the navigation bar on this website to appear correctly. On desktop the the navigation bar is running over 2 lines. I used the below code from another thread which resolved the issue on desktop but causes a problem with the mobile layout. Any advice on how to get this working well on desktop and mobile would be greatly appreciated.

Website password is: crawford

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

Site URL?

apologies https://hexaflexagon-buffalo-kb8j.squarespace.com/paintings#shop

Great, I think thats done it. Thanks for your speedy help!

Having nav on one line and ensuring it is still centred!

Hi I am building a client site and have been searching through forums for codes to stop the nav from going onto a second line. However, When I entered the below code it worked. But did not center everything. Please note that all forums are only showing websites where the logo on the left. My logo sits in the centre as well as the navigation.

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

Here is the site: https://spiralockstemp.squarespace.com/

Thank you!

On 5/9/2024 at 9:00 AM, AmandaJanedesigner said:

Having nav on one line and ensuring it is still centred!

Hi I am building a client site and have been searching through forums for codes to stop the nav from going onto a second line. However, When I entered the below code it worked. But did not center everything. Please note that all forums are only showing websites where the logo on the left. My logo sits in the centre as well as the navigation.

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

 

Here is the site: https://spiralockstemp.squarespace.com/

 

Thank you!

The site is private. You can follow this to share site url.