Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Preventing Navigation Items from Stacking


CMurphy

Question

Hi Guys,

I am using a centred navigation (logo on the left, contact button on the right and menu items in the middle).
Is there a way to prevent the navigation items from stacking as shown in this screen shot? 


1865100359_ScreenShot2020-09-16at8_33_18am.thumb.png.a9dc74c2a67fc284d6fedb074a1a3364.png


Any help is greatly appreciated! I have researched options however havent been able to get anything to work. I'm using SquareSpace 7.1.

Thanks!

Link to comment

Recommended Posts

  • 0

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!!!

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!

Screen Shot 2021-04-09 at 4.25.37 PM.png

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

image.thumb.png.9f6580082dba1b8b5d409c697c51a8b4.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

Link to comment
  • 0
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

Screen Shot 2021-07-28 at 10.33.38 am.png

Edited by Flutes_Flutists
Link to comment
  • 0
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

Screen Shot 2021-07-28 at 10.33.38 am.png

Don't remove any code. Add this code

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...