Preventing Navigation Items from Stacking

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? 

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!

watching, having same issues 

I guys, still hoping for assistance with this if anyone has a solution. 

Thanks for your time! 

Same issue!! Not great as my site will be evolving and will require more pages. Any Circle members that could help with this?

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-nav *, .header-menu-nav * { display: inline-block !important; padding: -0.5rem; margin: -17.5px;
  }

Let me know how it goes...

p.s.

Does anyone know how to move nav items closer together? My first nav item seems so far from the rest? 😕

30 minutes ago, HarKS said:

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-nav *, .header-menu-nav * { display: inline-block !important; padding: -0.5rem; margin: -17.5px;
  }

 

Let me know how it goes...

 

p.s.

 

Does anyone know how to move nav items closer together? My first nav item seems so far from the rest? 😕

@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 that button, there should be a few different sections such as header layout, logo and site title,etc. You will want to press the section that says “style”. Now you can customize the link spacing, and more! I sent screen shots down below to help you more.

Do you have any other questions? Thanks!

Thank You @inunzi 

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

Does anyone know how to make a header transparent when scrolling? Using 7.0. Thanks!!

@alig123 Can you give more info? Thanks!

For future comments.

If you share site url & which plan do you use (Personal, Business..) We can check easier.

@alig123 I see that you want to have the mobile menu navigation to be transparent when scrolling correct? Well I’m not sure how to do that but I’ll look into it further. But to just have the navigation to be transparent you can paste this code into the custom css section located in the design menu. 

// Transparent Mobile Menu Header //

@media only screen and (max-width: 640px) {
  .Site {
    margin-top: -90px;
  }
}

.Mobile-bar-branding, .Mobile-bar-menu {
  z-index: 999;
}

On 9/15/2020 at 6:38 PM, CMurphy said:

Is there a way to prevent the navigation items from stacking as shown in this screen shot?

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.

Thanks guys, unfortunately these havent worked for me. 
@tuanphan is there any possibility you could help assist with this one also? 

https://mushroom-rabbit-ff8k.squarespace.com PW: merton2020

I'm hoping to prevent the navigation from stacking and instead  have the space on either side of the nav, logo and button shrink before then reverting to a hamburger menu.

Thanks again!

On 10/6/2020 at 1:19 PM, CMurphy said:

Thanks guys, unfortunately these havent worked for me. 
@tuanphan is there any possibility you could help assist with this one also? 

https://mushroom-rabbit-ff8k.squarespace.com PW: merton2020

I'm hoping to prevent the navigation from stacking and instead  have the space on either side of the nav, logo and button shrink before then reverting to a hamburger menu.

Thanks again!

Add to Home > Design > Custom CSS

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

Thanks @tuanphan this has worked well however the navigation is no longer vertically centred between the logo and button. Any thoughts if this can be resolved? Thanks again! 

1 hour ago, CMurphy said:

Thanks @tuanphan this has worked well however the navigation is no longer vertically centred between the logo and button. Any thoughts if this can be resolved? Thanks again! 

Can you send a screenshot?

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.

Hmmmm that’s weird. Do you want the navigation items closer?

Aiming to have the navigation items centred between the logo and the get in touch button. 

Cheers!

9 hours ago, CMurphy said:

Aiming to have the navigation items centred between the logo and the get in touch button. 

Cheers!

Can you take a picture of something that can resemble what you are looking for?

15 hours ago, inunzi said:

Can you take a picture of something that can resemble what you are looking for?

Sure! 
The first screen shot shows the navigation items centred however this means they stack when the browser size is reduced. 

This screen shot shows @tuanphan code in-use which prevents the stacking but has pushed the navigation items towards the left. Ideally I would like to keep the items centred while also stoping them from stacking. 

Thanks for your help! 

4 hours ago, CMurphy said:

Sure! 
The first screen shot shows the navigation items centred however this means they stack when the browser size is reduced. 

This screen shot shows @tuanphan code in-use which prevents the stacking but has pushed the navigation items towards the left. Ideally I would like to keep the items centred while also stoping them from stacking. 

Thanks for your help! 

I will try to test something out tomorrow for you 😁!

18 hours ago, inunzi said:

I will try to test something out tomorrow for you 😁!

If you scroll up on the this forum page. I sent screenshots of something that can help you change how close or how far you want the navigation items. Please let me know if this was/wasn't what you where looking for. Thanks!

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

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

Unfortunately not! 🤨
I'm using the code above which resolves the issue of the menu stacking however it pushes the menu items across to the left (closer to the logo) rather than there previous centred position...