Navigation changes to two lines when the screen gets smaller

Hello, my website is doing the same thing. On my left screen the navigation is fine, but on the right screen my navigation is stacked.

thetenmg.com

I've tried EVERY code linked here. The only one that seemed to force it to move was the one below, however it shifted the logo in the center and broke the navigation so that none of the links were active anymore. Can anyone help me fix the stacking issue?

.header-nav {
  position: absolute;
  width: 60vw !important;
  left: 50%;
  transform: translateX(-50%);
}

.header-actions--right {
  width: 20vw !important;
}

I'm having the same issue when I view my site on my laptop. I've tried the CSS options mentioned above but none of them have made the navigation budge at all. 

Thank you!

18 minutes ago, Leanne_M said:

I'm having the same issue when I view my site on my laptop. I've tried the CSS options mentioned above but none of them have made the navigation budge at all. 

https://bamboo-rabbit-99gt.squarespace.com/config/
password: !(cX3Ly@$323cC(

Thank you!

Try adding to Home > Design > Custom Css

/*center navigator 1 line*/
.header-title-nav-wrapper {
  flex: 1 0 85%;
}
.header-layout-nav-center .header-nav {
  width: 70%;
  flex: 1 1 70%;
}

Let me know how it works

Support me by pressing 👍 if this useful for you

My testing

8 minutes ago, bangank36 said:

My testing

That works perfectly! Thank you @bangank36!

HI, i hope i can still get some feedback here. I have tried to prevent nav link stacking in the header with this code:

.header-nav {

    width: 90% !important;

    flex: 1 1 90% !important;

}

#logoWrapper {display: block !important;     padding-top: 40px;

   margin: auto !important;}

header{

   position: fixed;

   height: 190px;

   padding: 0px;

   text-align: center;

  #header #headerNav {

   display: inline-block;

   margin-top: 45px;

   text-align: center;

   margin-right:;

}

#headerNav nav a {

   padding-left: 15px;

   padding-right: 15px;}

}

BUT what happens is it reduces the size of the logo and sends everything to the right. Is there a simple code fix?

url: https://hampersfor.com.au   (live site)

Thanks, Kathy

On 4/1/2022 at 4:16 PM, Kath_HampersFor said:

HI, i hope i can still get some feedback here. I have tried to prevent nav link stacking in the header with this code:

.header-nav {

    width: 90% !important;

    flex: 1 1 90% !important;

}

#logoWrapper {display: block !important;     padding-top: 40px;

   margin: auto !important;}

 

header{

   position: fixed;

   height: 190px;

   padding: 0px;

   text-align: center;

  #header #headerNav {

   display: inline-block;

   margin-top: 45px;

   text-align: center;

   margin-right:;

}

#headerNav nav a {

   padding-left: 15px;

   padding-right: 15px;}

}

BUT what happens is it reduces the size of the logo and sends everything to the right. Is there a simple code fix?

url: https://hampersfor.com.au   (live site)

Thanks, Kathy

Can you take a screenshot of problem? We can check easier

Notice, that as the page size reduces, the navigation links begin overlapping the logo (i think my code above somehow stopped the stacking into 2 lines) ...see image below

22 hours ago, Kath_HampersFor said:

Notice, that as the page size reduces, the navigation links begin overlapping the logo (i think my code above somehow stopped the stacking into 2 lines) ...see image below

I think we can change it to burger style on some smaller screen sizes. What do you think?

How do you do that?

On 4/5/2022 at 2:59 PM, Kath_HampersFor said:

How do you do that?

 

Add to Design > Custom CSS

/* Show burger from 1200px to 1300px */
@media screen and (min-width:1200x) and (max-width:1300px) {
 /* hide navigation */
    .header-nav {
    display: none;
}

/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}}

I am getting a syntax error in this line 

@media screen and (min-width:1200x) and (max-width:1300px) {

On 4/7/2022 at 7:32 AM, Kath_HampersFor said:

I am getting a syntax error in this line 

@media screen and (min-width:1200x) and (max-width:1300px) {

The code looks correct. Can you send all code in Custom CSS?

I am having the same problem but none of the above code works.  Could someone take a look and help me out?

Thanks!

Misty

falcon-khaki-f3fl.squarespace.com

password: 

18 hours ago, MistyPhotos said:

I am having the same problem but none of the above code works.  Could someone take a look and help me out?

Thanks!

Misty

falcon-khaki-f3fl.squarespace.com

password: 

Siskinhospital2022!

You can consider forcing mobile menu appears on some screen sizes

Or add this to Design > Custom CSS to force nav always on 1 line

.tweak-header-primary-nav-hover-style-active .Header-nav .Header-nav-inner {
    display: flex;
    flex-wrap: nowrap;
}

I'm having the same issue with my website. The navigation bar breaks into two lines when in a smaller window. None of the codes above worked for me.

torjusostmoen.squarespace.com

On 3/15/2023 at 12:45 AM, torjusos said:

I'm having the same issue with my website. The navigation bar breaks into two lines when in a smaller window. None of the codes above worked for me.

torjusostmoen.squarespace.com

Add to Design > Custom CSS

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

Hey all, I am having the same issue with my website: Sunsetlake.org. The nav breaks into multiple lines and begins to stack.

On 6/12/2023 at 11:32 PM, dmharris34 said:

Hey all, I am having the same issue with my website: Sunsetlake.org. The nav breaks into multiple lines and begins to stack.

We can reduce items text size or force header to mobile header on this screen size. Which screen size do you see problem? We can help easier

I'm having the same issue with goodmorningagency.uk (pw: goodmorning)

I added the CSS recommended above and it did keep everything on one line, but it shifted the centralized logo and navigation to the left. 

Quote

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

Any thoughts to keep the navigation on one line without shifting the nav to the left?

On 3/14/2024 at 10:10 PM, JBallard said:

I'm having the same issue with goodmorningagency.uk (pw: goodmorning)

I added the CSS recommended above and it did keep everything on one line, but it shifted the centralized logo and navigation to the left. 

Any thoughts to keep the navigation on one line without shifting the nav to the left?

Did you solve? It looks fine to me