Split navigation with items on extremities of the screen

Hi all,

I used custom css to split my navigation on either side of my header, but I would like them to be aligned to the far right and far left on each side of the centered logo. My client has a personal plan so I have limited options. Any help would appreciated!

https://swan-cinnamon-97fw.squarespace.com/

@media only screen and (min-width: 1030px){ 
.header-nav {
 position: absolute;
 margin-top:0!important;
 top: 1rem; 
}

.header-nav-item:nth-of-type(1) {
 margin-right: 50vw!important; 
}

.header-title {
 z-index: 99!important;
 } 
}

This is how I'd like it to look like:

@tuanphan thank you so much!

Can you maybe help me with another issue, please?

I'm trying to add a secondary navigation to the website by using a code that keeps the last block in the footer sticky in the bottom of the screen, as seen in the attached image.

However, I just realized it won't work for me because I need it to appear only in select pages and I also need to be able to change its appearance in each page.

Is there an alternative approach you can share with me?

On 2/26/2024 at 9:20 AM, luizfagundes said:

@tuanphan thank you so much!

Can you maybe help me with another issue, please?

I'm trying to add a secondary navigation to the website by using a code that keeps the last block in the footer sticky in the bottom of the screen, as seen in the attached image.

However, I just realized it won't work for me because I need it to appear only in select pages and I also need to be able to change its appearance in each page.

Is there an alternative approach you can share with me?

 

I usually use 2 approaches to achieve this

(1) Add it to page content instead of footer, then use code to Page Header Code Injection

(2) Use Section Loader Plugin to build content in Not Linked Page, then use code to Page Header Code Injection to achieve this on one page

You can share link to some pages & Describe desired layout, I think I can write a quick guide for you.

On 2/29/2024 at 5:34 AM, tuanphan said:

I usually use 2 approaches to achieve this

(1) Add it to page content instead of footer, then use code to Page Header Code Injection

(2) Use Section Loader Plugin to build content in Not Linked Page, then use code to Page Header Code Injection to achieve this on one page

You can share link to some pages & Describe desired layout, I think I can write a quick guide for you.

Is there a way to achieve this with a Personal plan? I know code injection and plugins are available just for Business and above.

On 3/6/2024 at 6:54 AM, luizfagundes said:

Is there a way to achieve this with a Personal plan? I know code injection and plugins are available just for Business and above.

With Personal Plan, you can add a section to bottom of each page, then we can use CSS code to make it fixed.

You can do a page first, then share url, I will check & give you code

On 3/9/2024 at 12:23 AM, tuanphan said:

With Personal Plan, you can add a section to bottom of each page, then we can use CSS code to make it fixed.

You can do a page first, then share url, I will check & give you code

Cool! I just added the section to the bottom of the home page, it's the white strip where it says "Destaques, Editorial, Vídeo, Foto". It also needs a 1px #E20505 top margin like the image attached. Is it possible to add that in the code? Thanks so much!

On 3/12/2024 at 1:07 AM, luizfagundes said:

Cool! I just added the section to the bottom of the home page, it's the white strip where it says "Destaques, Editorial, Vídeo, Foto". It also needs a 1px #E20505 top margin like the image attached. Is it possible to add that in the code? Thanks so much!

Edit page > Add a Block > Choose Code > Paste this code

<style>
  article section:last-child {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #E20505;
}
</style>

On 3/14/2024 at 5:03 AM, tuanphan said:

Edit page > Add a Block > Choose Code > Paste this code

<style>
  article section:last-child {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #E20505;
}
</style>

Amazing, thank you so much!!

hi @tuanphan I would also like to achieve this on my site https://cocoya.squarespace.com/ (pw is Cocoya). I would like the links to be aligned and evenly spaced out to the far left and far right site margins (red lines). Could you help with this? Thank you!
 

The code is used is:

.header-nav {
    position: absolute;
    top: 0px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: 0px!important;
}

.header-nav-item:nth-of-type(3) {
    margin-right: 40vw!important;
}

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

.header-display-desktop .header-title {
    flex: 0 0 40% !important;
    z-index: 999999999;
}
 

On 11/7/2024 at 10:00 AM, charlineca said:

hi @tuanphan I would also like to achieve this on my site https://cocoya.squarespace.com/ (pw is Cocoya). I would like the links to be aligned and evenly spaced out to the far left and far right site margins (red lines). Could you help with this? Thank you!
 

The code is used is:

 

.header-nav {
    position: absolute;
    top: 0px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: 0px!important;
}

.header-nav-item:nth-of-type(3) {
    margin-right: 40vw!important;
}

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

.header-display-desktop .header-title {
    flex: 0 0 40% !important;
    z-index: 999999999;
}
 

You mean move left nav touch red line, move right nav touch red line?