Split Navigation in 7.1 Fluide Engine

Hello, I am would like to create a split navigation using the code from Station 7, see here 

/*Make split navigation*/
.header-nav {
    position: absolute;
    top: 5px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: -50px!important;
}

.header-nav-item:nth-of-type(2) {
    margin-right: 340px!important;
}

.header-title-logo a {
    z-index: 1000;
    position: relative;
}

This used to work perfectly fine, but since using Fluid Engine, the split does not work anymore and the links are all pushed to the left side.

Is there any way to make this work in Fluid Engine?

Thank you for your help.

Fluid Engine won't affect that code. Maybe another code conflict with your code.

If you use a Business Plan or higher, you can set layout to Left Nav - Middle Logo, we can give another code to create split navigation.

@tuanphanThank you for your response. This is really strange as I am hardly using any customised CSS, just the Squarekicker extension. Could that be a reason.

The site is still on trial and will launch next month using the Business Plan. It would be great if you can give me another code to create a split navigation. Thank you.

On 11/22/2022 at 5:53 PM, onika said:

@tuanphanThank you for your response. This is really strange as I am hardly using any customised CSS, just the Squarekicker extension. Could that be a reason.

The site is still on trial and will launch next month using the Business Plan. It would be great if you can give me another code to create a split navigation. Thank you.

You can change header layout to Left Nav - Middle Logo, then share url, we can check & give code easier

@tuanphanthis is the URL https://stillness-within.squarespace.com/ - I added the following code, but the navigation does not split:

/*Make split navigation*/
.header-nav {
    position: absolute;
    top: 5px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: -50px!important;
}

.header-nav-item:nth-of-type(2) {
    margin-right: 340px!important;
}

.header-title-logo a {
    z-index: 1000;
    position: relative;
}

There is no code interfering as far as I can tell.

Thank you so much for your help!

On 11/25/2022 at 5:16 PM, onika said:

@tuanphanthis is the URL https://stillness-within.squarespace.com/ - I added the following code, but the navigation does not split:

/*Make split navigation*/
.header-nav {
    position: absolute;
    top: 5px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: -50px!important;
}

.header-nav-item:nth-of-type(2) {
    margin-right: 340px!important;
}

.header-title-logo a {
    z-index: 1000;
    position: relative;
}

There is no code interfering as far as I can tell.

Thank you so much for your help!

What is access password?

stillness

On 12/2/2022 at 10:41 AM, tuanphan said:

Add this to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('nav.header-nav-list').clone().insertBefore('.header-actions.header-actions--right>.showOnMobile');
	});
</script>
<style>
  .header-nav nav>div:nth-child(n+3) {
    display: none;
}
.header-actions.header-actions--right>nav>div:nth-child(-n+2) {
    display: none;
}
.header-actions.header-actions--right>nav:nth-child(2) {
    display: none;
}
.header-nav-item:not(:last-child) {
    margin-right: 1.5vw;
}
</style>

Explain

• Script code will duplicate Left Nav & add to Right of Header
• First <style> code will hide item 3 + item 4 in Left Nav
• Second <style> code will hide item 1 + item 2 in Right Nav
• Third code will hide white space on right

Thank you very much, this is working perfectly!

Hi, my navbar has disapeared on the right side, it was there yesterday. Last night i paid for the business plan, is there something wrong with my code?

Please let me know as soon as possible how i can fix this as the client will notice soon. 

https://tuna-cranberry-bmdk.squarespace.com/config/pages

What information do you need to enter the site?

Thank you

44 minutes ago, Natasha-Siena said:

What information do you need to enter the site?

As your website isn't public yet, we need you to set a site-wide password and share it with us.

I think its because i upgraded to a personal plan not business therefore my footer injected code is not acessable anymore unless i upgrade to business. 

On 4/6/2023 at 10:34 PM, Natasha-Siena said:

I think its because i upgraded to a personal plan not business therefore my footer injected code is not acessable anymore unless i upgrade to business. 

You can setup an access password, we can give CSS code for Personal Plan