Centered Logo with navigation items on either side

I am trying to have navigation items on either side of the logo, like the example below. Does anyone know how to achieve this? I would also like the logo and header bar to shrink as you scroll. Thanks!! 

50 minutes ago, JennWalker said:

I am trying to have navigation items on either side of the logo, like the example below. Does anyone know how to achieve this? I would also like the logo and header bar to shrink as you scroll. Thanks!! 

 

 

Kindly share your site with protected password to check it easily

16 hours ago, bangank36 said:

Kindly share your site with protected password to check it easily

patricialindner.com password Patricia. Thanks!

On 10/27/2021 at 8:57 PM, bangank36 said:

Kindly share your site with protected password to check it easily

Hi there, just wanted to make sure you got my message, patricialindner.com, password Patricia. Thanks!

Here is a non complicated  guide for split navigation for a  7.1 website. 

https://stnsvn.com/blog/how-to-make-a-split-navigation-in-squarespace-71

16 hours ago, derricksrandomviews said:

Here is a non complicated  guide for split navigation for a  7.1 website. 

https://stnsvn.com/blog/how-to-make-a-split-navigation-in-squarespace-71

Thanks so much , I will try this!

16 hours ago, derricksrandomviews said:

Here is a non complicated  guide for split navigation for a  7.1 website. 

https://stnsvn.com/blog/how-to-make-a-split-navigation-in-squarespace-71

Thanks that worked! However, after that I tried the following code to shrink the logo on scroll and it moved the navigation items around. Any suggestion for that? Basically I want the header to be fixed when I scroll but the logo to shrink down. Like this one: https://wendypaquette.com/. Thanks so much! 

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

 Two snippets of code can fight each other and that seems to be what is happening. The fix for this  is a bit more complicated and will require the coders here to see your site.

1 hour ago, derricksrandomviews said:

 Two snippets of code can fight each other and that seems to be what is happening. The fix for this  is a bit more complicated and will require the coders here to see your site.

Ok thank you, will try to find someone to help!

Do you still need help on this?

On 11/2/2021 at 5:27 AM, tuanphan said:

Do you still need help on this?

Sorry, just seeing this now, yes I do please! I would like the header to shrink down and show only an image portion of the logo with no text when you scroll, like this: https://maplesliving.ca/. Website is patricialindner.com password Patricia. Thank you!