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 post
  • Answers 50
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@HarKS Yes, there is a way to do this, and it is very easy to do so! Just go to your Squarespace site-click edit-then click the header and click the button that says “Edit header”. After you pressed t

Hi Guys!   May have solved the issue here... This worked for mine... and I had two nav items underneath the original line. Have a fiddle with the numbers to reflect your page .header-na

No problem 😁👍 @ShortAngryViking  Is there anything else that I can help you with? Thanks!

Posted Images

Recommended Posts

  • 0
1 hour ago, inunzi said:

Are the navigation items in the center now?😁

Yep they are however that is because I have removed the code that stops the items from stacking. 

 

Link to post
  • 0
On 10/8/2020 at 6:03 AM, CMurphy said:

Sure! @inunzi see below. 
I should clarify that by 'navigation' I meant the menu items which you will see are sitting off towards the left rather than centred. Cheers.

Screen Shot 2020-10-08 at 3.01.07 pm.png

Hi @CMurphy how did you manage to get your menu nav to be blurred transparent? looks great!

Link to post
  • 0

***My Navigation Menu is Socially Distancing***

Q: Any idea how to move my 'About' closer to the rest of the navigation menu? I am using 7.1, and when I add more nav buttons, things start to shift.

Screenshot 2020-10-18 at 23.07.48.png

Link to post
  • 0
4 hours ago, HarKS said:

***My Navigation Menu is Socially Distancing***

Q: Any idea how to move my 'About' closer to the rest of the navigation menu? I am using 7.1, and when I add more nav buttons, things start to shift.

Screenshot 2020-10-18 at 23.07.48.png

Hmmm try this method and let me know if it works. First click on the button “edit”-Click “Edit Header”- click on the computer icon- and then scroll down until you see the “link spacing” part of the section. Now, you can have the navigation links as far/close as you like 😁👍 you can see the photos below for a better idea.

BF82F463-D328-46B7-AA11-E23FAF18BF5F.jpeg

D8DAD70B-A9E5-438E-83E9-264259984595.jpeg

7F0DA0CF-5578-4866-B676-4D63C5F2AE41.jpeg

Link to post
  • 0

Hi Inunzi,

Unfortunately no luck.

The 'About' is already further apart, so when I use link spacing, it makes it worse. I somehow need to isolate that one nav link, because if I use 'word-spacing' in the CSS, they will all move.

 

Link to post
  • 0
8 hours ago, HarKS said:

Hi Inunzi,

Unfortunately no luck.

The 'About' is already further apart, so when I use link spacing, it makes it worse. I somehow need to isolate that one nav link, because if I use 'word-spacing' in the CSS, they will all move.

 

Hmmm, @creedon might know a work around.

Link to post
  • 0
On 9/15/2020 at 5:38 PM, CMurphy said:

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!

Hello CMurphy, I have the exact same issue, how did you manage to avoid stacking and keep them centered?

My site is bcfit.mx

Link to post
  • 0
8 hours ago, axelvargas said:

Hello CMurphy, I have the exact same issue, how did you manage to avoid stacking and keep them centered?

My site is bcfit.mx

I see fine here. Which screen size do you have problem? 

Link to post
  • 0

Same issue as CMurphy, tried the code listed below but then the navigation was no longer centred.

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

To me it's definitely the issue with the logo + button flex boxes being set to 33% each which seems unnecessarily large to me. Like why is there only 34% width set to nav items?!?!?!

stack_nav_1.jpg

stack_nav_2.jpg

stack_nav_3.jpg

Link to post
  • 0
On 1/13/2021 at 7:57 AM, james-creature said:

Same issue as CMurphy, tried the code listed below but then the navigation was no longer centred.

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

To me it's definitely the issue with the logo + button flex boxes being set to 33% each which seems unnecessarily large to me. Like why is there only 34% width set to nav items?!?!?!

stack_nav_1.jpg

stack_nav_2.jpg

stack_nav_3.jpg

Can you share site url? We can check easier

Link to post
  • 0
On 1/25/2021 at 7:43 PM, lainer said:

I'm having the same issue. I thought I found a workaround but it didn't work perfectly.

Here's the site URL: https://www.oceanworksgallery.com/

I just want all nav links to be on one line. Thanks!!

Add to Design > Custom CSS

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

 

Link to post
  • 0

Did anyone ever figure this out? I've tried all the css in this thread and nothing is working.

I am working in squarespace 7.1.

Any advice would be greatly appreciated. Thank you so much!

Link to post
  • 0
1 hour ago, dovely said:

Did anyone ever figure this out? I've tried all the css in this thread and nothing is working.

I am working in squarespace 7.1.

Any advice would be greatly appreciated. Thank you so much!

Can you share site url?

Link to post
  • 0
On 2/12/2021 at 11:38 PM, dovely said:

Sure thing @tuanphan.

The website is not live yet.

But here is the URL as of right now. https://cello-hexahedron-45kk.squarespace.com/

Let me know if you need anything else. Thank you for your help.

 

Add to Design > Custom CSS

.header-layout-nav-right .header-nav-list {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...