Jump to content

Preventing Navigation Items from Stacking

Recommended Posts

Hi!

I‘ve tried every code in here but there‘s always something not quite ok (not centered, hamburger position not ok, etc.). The latest one being:

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

With this the navigation bar does not fit into the header anymore. See screenshot from my iPad (i‘ve removed the code again).

Can you please help me? My URL is: https://www.claudeflaig.ch

Thanks in advance!

Claude

Anmeldung — Claude Flaig - bewusst. verbunden. sein.png

Edited by Claude
Link to comment
On 3/24/2023 at 1:52 PM, Claude said:

Hi!

I‘ve tried every code in here but there‘s always something not quite ok (not centered, hamburger position not ok, etc.). The latest one being:

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

With this the navigation bar does not fit into the header anymore. See screenshot from my iPad (i‘ve removed the code again).

Can you please help me? My URL is: https://www.claudeflaig.ch

Thanks in advance!

Claude

Anmeldung — Claude Flaig - bewusst. verbunden. sein.png

Use this code instead

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 5/2/2023 at 10:15 AM, LiamC said:

Hello!

I'm using a left-side navigation menu and it keeps wrapping the text (but doesn't on the squarespace preview, strangely enough). What code should I use?

Site is https://www.liamcalhounviolin.com/

 

Thank you!

How about forcing mobile menu on this screen size? Or we will need to reduce nav items size, to make all fit on one line

image.thumb.png.0760827bbdd297943a1e2340733a6ef6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
On 3/24/2021 at 1:06 AM, tuanphan said:

Hi, Use this new code

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

 

@tuanphan I have tried every bit of code listed prior to and including this one on this thread. Nothing affecting my site.

When full screen it looks fine, but I want all nav items to stay on one line for as small a screen as possible. There's plenty of space on either side.

I'm using centered logo with centered nav below.

monicaros.squarespace.com PW NewWebsite1!

Screen Shot 2023-07-27 at 2.42.30 PM.png

Link to comment
17 hours ago, KristenRuthSmith said:

@tuanphan I have tried every bit of code listed prior to and including this one on this thread. Nothing affecting my site.

When full screen it looks fine, but I want all nav items to stay on one line for as small a screen as possible. There's plenty of space on either side.

I'm using centered logo with centered nav below.

monicaros.squarespace.com PW NewWebsite1!

Screen Shot 2023-07-27 at 2.42.30 PM.png

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
10 hours ago, KristenRuthSmith said:

@tuanphan This code doesn't seem to be solving. See in the screen shot how "Give" still gets dropped to a second line when there is lots of space on either side.

Screen Shot 2023-07-28 at 3.48.58 PM.png

Exit edit mode & check again. I tested some smaller screen sizes & see the code worked.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 10 months later...
On 6/5/2024 at 9:25 AM, CarpetMaster said:

Hi there, I also have the same issue. My website is carpetmaster.nz 

How would I be able to do this? 

Thanks

Use this to Website > Website Tools > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.