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
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 comment
  • 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 comment
  • 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? 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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