Preventing Navigation Items from Stacking

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?

17 hours ago, inunzi said:

May I ask what your header layout is set to?

Sue! Currently set as shown in this screen shot:

Thanks!

1 hour ago, CMurphy said:

Sue! Currently set as shown in this screen shot:

Thanks!

 

Are the navigation items in the center now?😁

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. 

2 hours ago, CMurphy said:

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

 

Oh! So my help worked?

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.

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

7 hours ago, jmiles said:

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

Hi @jmilesI used this CSS: https://www.ghostplugins.com/steps/frosted-and-blurred-header
Hope this helps! 

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

@HarKS Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

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.

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.

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.

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.

I'd be happy to take a look but I need the URL to the site as I posted previously it is difficult to work in the abstract.

@HarKS

Remove or comment out the following line from your Custom CSS.

    .header-nav-item:first-child {
        margin-right: 4vw !important;
    }

Let us know how it goes.

Hi Creedon,

That worked perfectly! Thank you. However, It has now in turn given me a new problem. I will send this to your messages.

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? 

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

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? 

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

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

Can you share site url? We can check easier

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

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%;
}

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!

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?

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.

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;
}