Preventing Navigation Items from Stacking

@tuanphan oh my gosh! That worked perfectly, thank you SOOO much :)!

I've tried all the codes and none are working for me....

my site is - https://thewellnessdiva.squarespace.com/

and the password is LetMeIn! 

I would like my nav to go all the way across the screen.

The latest code i tried was this -- 

.header-title-nav-wrapper {
    flex: 1 0 90%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
}

Thanks!!!

On 3/17/2021 at 3:57 PM, smiliezz said:

I've tried all the codes and none are working for me....

my site is - https://thewellnessdiva.squarespace.com/

and the password is LetMeIn! 

I would like my nav to go all the way across the screen.

The latest code i tried was this -- 

 

.header-title-nav-wrapper {
    flex: 1 0 90%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
}

 

Thanks!!!

Hi, Use this new code

/* nav one line */
.header-title-nav-wrapper {
    flex: 0 0 90% !important;
}

@tuanphan I hope you're doing well. I have another site where the text is wrapping, but this time it is in the footer. Do you have any idea on how to prevent this from happening? Let me know. Thank you!

On 4/10/2021 at 4:25 AM, dovely said:

@tuanphan I hope you're doing well. I have another site where the text is wrapping, but this time it is in the footer. Do you have any idea on how to prevent this from happening? Let me know. Thank you!

Can you share site url? We can check easier

@tuanphan Yes it is https://hawk-tomato-czz2.squarespace.com/. Let me know if you need anything else. Thank you!

On 4/15/2021 at 9:53 PM, dovely said:

@tuanphan Yes it is https://hawk-tomato-czz2.squarespace.com/. Let me know if you need anything else. Thank you!

Hi. What is password?

@tuanphanit is Doves2021!

Let me know if you have any other questions. Thank you!

On 4/19/2021 at 9:52 PM, dovely said:

@tuanphanit is Doves2021!

Let me know if you have any other questions. Thank you!

Add to Design > Custom CSS

/* prevent footer links wrap */
div#block-yui_3_17_2_1_1617309994354_19586 a {
    white-space: nowrap;
}

The header looks big on scroll. Do you want to reduce header on scroll?

@tuanphan yes please that would be great as well. Thank you!

18 hours ago, dovely said:

@tuanphan yes please that would be great as well. Thank you!

Add to Design > Custom CSS

/* Make image smaller on scroll */
header#header img {
	transition: all 0.3s;
}
.shrink img {
    max-height: 120px;
	transition: all 0.3s;
}

@tuanphanOh my gosh thank you so much. These are working beautifully!

On 9/30/2020 at 12:00 PM, hellothisisjeff said:

I was having this same issue on a 7.1 site with a centered nav. I wrote this CSS and dropped it into the Custom CSS section which seems to solve the issue.

// Header Nav Width Adjustment
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 2 0 100%;
}
.header-layout-branding-center-nav-center .header-actions--right {
  position: relative;
  right: 4vw;
}

The first value in the flex property basically tells the div holding the nav to grow to fill the space. However, this seemed to push the right side action buttons (cart icon, in my case) off the screen a bit, so I added the next line of code to move it back into place.

A little bit of a hack job, but gets the job done.

hellothisisjeff: HERO, thank you

On 10/7/2020 at 6:51 PM, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav {
    width: 90% !important;
    flex: 1 1 90% !important;
}

 

I tried this code and it got rid of the second line in the header on smaller screens (such as an iPad Pro 12.9) but it also pulled all the menu buttons to the left (they shoudl ideally be in the middle). I tried some of the other codes to get them back to the middle but then they knocked the buttons on the right out of the screen. Do you have any suggestions?

Site is https://raccoon-radish-ytrb.squarespace.com/ Passcode is flutesandflutists

On 7/28/2021 at 7:35 AM, Flutes_Flutists said:

I tried this code and it got rid of the second line in the header on smaller screens (such as an iPad Pro 12.9) but it also pulled all the menu buttons to the left (they shoudl ideally be in the middle). I tried some of the other codes to get them back to the middle but then they knocked the buttons on the right out of the screen. Do you have any suggestions?

Site is https://raccoon-radish-ytrb.squarespace.com/ Passcode is flutesandflutists

Don't remove any code. Add this code

nav.header-nav-list {
    justify-content: flex-end !important;
    display: flex;
}

23 hours ago, tuanphan said:

Don't remove any code. Add this code

nav.header-nav-list {
    justify-content: flex-end !important;
    display: flex;
}

 

That worked perfectly, thank you so much!

Hey guys,

I tried all the codes mentioned in previous posts, but nothing seemed to work for this 7.1 site:

https://hotel-bries.squarespace.com/

Is there anyone who can help me with preventing this navigation from stacking on desktop AND keeping it centered?

Thanks in advance!

On 10/11/2021 at 7:19 PM, sandrakeus said:

Hey guys,

I tried all the codes mentioned in previous posts, but nothing seemed to work for this 7.1 site:

https://hotel-bries.squarespace.com/

Is there anyone who can help me with preventing this navigation from stacking on desktop AND keeping it centered?

Thanks in advance!

 

Try this

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

On 10/13/2021 at 12:38 AM, tuanphan said:

Try this

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

 

Hi @tuanphan,

Like the others I have tried all or combinations of the codes on this thread.

Some work, but screw up the position of the Hamburger Menu on mobile. Others look perfect on all devices, but I end up with an off-center bar.

Could you take a peek?

Site: https://devspringford.squarespace.com/?password=sneakpeek

I use this CSS:
 

/* nav one line */
.header-title-nav-wrapper {
    flex: 0 0 90% !important;
}

.nav.header-nav-list {
    justify-content: flex-end !important;
    display: flex;
}

And have set the header to this setting:

Note: I have hid the logo on the homepage.

Thanks,

Roland

On 2/12/2022 at 10:50 PM, RolandFuseHub said:

Hi @tuanphan,

Like the others I have tried all or combinations of the codes on this thread.

Some work, but screw up the position of the Hamburger Menu on mobile. Others look perfect on all devices, but I end up with an off-center bar.

Could you take a peek?

Site: https://devspringford.squarespace.com/?password=sneakpeek

I use this CSS:
 

/* nav one line */
.header-title-nav-wrapper {
    flex: 0 0 90% !important;
}

.nav.header-nav-list {
    justify-content: flex-end !important;
    display: flex;
}

And have set the header to this setting:

Note: I have hid the logo on the homepage.

Thanks,

Roland

Add this CSS

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

1 hour ago, tuanphan said:

Add this CSS

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

 

Hi @tuanphan,

That worked in one way, but not in another: centre.

As you will see it doesn't stack on narrower screens, but it shifts the whole nav bar to the left.

Any solution that comes to mind?

On 2/14/2022 at 11:47 AM, RolandFuseHub said:

Hi @tuanphan,

That worked in one way, but not in another: centre.

As you will see it doesn't stack on narrower screens, but it shifts the whole nav bar to the left.

Any solution that comes to mind?

Try this new code

nav.header-nav-list {
    flex-wrap: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

On 2/18/2022 at 9:34 PM, tuanphan said:

Try this new code

nav.header-nav-list {
    flex-wrap: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

 

That worked beautifully! Thanks @tuanphan

I have two things I am working on regarding the sub-navigation for Squarespace 7.0 Tremont template.

1. Having the same issue but with sub-navigation.  I don't want the text to wrap when stacked.  (see the first screenshot). I want the titles of the pages to be all on one line. 

2. I am also looking for the sub-navigation to be horizontal instead of vertical. I've gotten this far (see the second screenshot) and am hoping that removing the text wrap will also solve the awkwardness of the horizontal menu. Unless there is a better code. 

Looking for it to be similar to this site: http://baralaye.com/work

The CSS code I put in for the horizontal menu is : 

/* Nav dropdown */

.subnav {

    width: 100% !important;

    display: -webkit-box !important;

    display: -ms-flexbox !important;

    display: flex !important;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;

    justify-content: flex-end;

}

.subnav {

    margin-right: 30px;

  top: 30px;

}

.subnav {

    position: static;

}

.subnav {

    flex-wrap: nowrap;

}

On 3/2/2023 at 4:35 AM, Wryn said:

I have two things I am working on regarding the sub-navigation for Squarespace 7.0 Tremont template.

1. Having the same issue but with sub-navigation.  I don't want the text to wrap when stacked.  (see the first screenshot). I want the titles of the pages to be all on one line. 

2. I am also looking for the sub-navigation to be horizontal instead of vertical. I've gotten this far (see the second screenshot) and am hoping that removing the text wrap will also solve the awkwardness of the horizontal menu. Unless there is a better code. 

Looking for it to be similar to this site: http://baralaye.com/work

The CSS code I put in for the horizontal menu is : 

 

/* Nav dropdown */

.subnav {

    width: 100% !important;

    display: -webkit-box !important;

    display: -ms-flexbox !important;

    display: flex !important;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;

    justify-content: flex-end;

 

}

.subnav {

    margin-right: 30px;

  top: 30px;

}

.subnav {

    position: static;

}

.subnav {

    flex-wrap: nowrap;

}

What is your site url? We can check easier