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 39
  • 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

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 post
  • 0
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 post
  • 0

@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 post
  • 0
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 post
  • 0
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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! 

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

Link to post
  • 0

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

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

Link to post
  • 0
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 post
  • 0
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 post
  • 0
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 post
  • 0
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 post
  • 0
3 hours ago, CMurphy said:

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

May I ask what your header layout is set to?

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