Jump to content

Preventing Navigation Items from Stacking

Recommended Posts

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

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? 😕

Link to comment
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.1F5D2019-C147-4304-A5C4-2BF92B94304E.thumb.jpeg.7b93fed3abbaa5dea23f54fc70a581fc.jpeg12E5168C-B029-441E-A7B1-89A96D8C9F01.thumb.jpeg.e3e96b56eb31beb094cef3cea39d6297.jpeg38036136-D564-4DDF-9AE3-FA1DDB3BF59B.thumb.jpeg.80c698d61fa53a7d067deb9a93248a4e.jpegCED5C508-C8D6-4DC6-B159-30D0ED6031AB.thumb.png.e163cd1ef92a833a3964c34016e83788.png

Do you have any other questions? Thanks!

Edited by inunzi
Link to comment

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

Edited by hellothisisjeff
Link to comment
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;
}

 

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

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

1751620629_ScreenShot2020-10-10at10_54_36am.thumb.png.fe4be4ff744527d69585734bd8d963a7.png

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. 

94330523_ScreenShot2020-10-10at10_53_59am.thumb.png.026edb1bb832214b7d40bc1ca3bc4380.png

Thanks for your help! 

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

1751620629_ScreenShot2020-10-10at10_54_36am.thumb.png.fe4be4ff744527d69585734bd8d963a7.png

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. 

94330523_ScreenShot2020-10-10at10_53_59am.thumb.png.026edb1bb832214b7d40bc1ca3bc4380.png

Thanks for your help! 

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

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

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

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.