heading Keep Logo Center, Move Navigation to Right in 7.1

Site URL: https://shallot-leopard-twxs.squarespace.com/

https://shallot-leopard-twxs.squarespace.com/

pw: carden

Hi there - I am looking for help moving my menu navigation to the top right side of the screen and keep the logo in the center.

Site header options aren't letting me pair these two options together.

Hi. It looks like you solved this?

@tuanphan Please let me know how to do this! I have been searching everywhere for the code.  I would like logo centre and navigation on the right

https://viola-rust-msbd.squarespace.com/

password: sunday

18 hours ago, Courteney said:

@tuanphan Please let me know how to do this! I have been searching everywhere for the code.  I would like logo centre and navigation on the right

https://viola-rust-msbd.squarespace.com/

password: sunday

You mean: 

• 1. Left Menu - Logo - Right Menu
• OR 2. Logo - Right Menu?

On 4/25/2021 at 2:16 PM, tuanphan said:

You mean: 

• 1. Left Menu - Logo - Right Menu
• OR 2. Logo - Right Menu?

I am wanting logo centre and then menu (navigation) on the right. 

This is specifically for desktop, I already have mobile in the right place.

I have attached a screenshot below to show my mock up of what I am wanting.

Thank you!

On 4/27/2021 at 3:36 AM, Courteney said:

I am wanting logo centre and then menu (navigation) on the right. 

This is specifically for desktop, I already have mobile in the right place.

I have attached a screenshot below to show my mock up of what I am wanting.

Thank you!

Try adding to Design > Custom CSS

/* right menu */
.header-title-nav-wrapper {
    flex: 1 0 100%;
    flex-direction: row-reverse;
}
.header-nav {
    text-align: right;
}
.header-title-logo {
    text-align: right;
}

2 hours ago, tuanphan said:

Try adding to Design > Custom CSS

/* right menu */
.header-title-nav-wrapper {
    flex: 1 0 100%;
    flex-direction: row-reverse;
}
.header-nav {
    text-align: right;
}
.header-title-logo {
    text-align: right;
}

 

Thank you!!!!

However the logo isn't fully centred, is there any way to fully centre this?

16 hours ago, tuanphan said:

Try adding to Design > Custom CSS

/* right menu */
.header-title-nav-wrapper {
    flex: 1 0 100%;
    flex-direction: row-reverse;
}
.header-nav {
    text-align: right;
}
.header-title-logo {
    text-align: right;
}

 

Hi @tuanphan! Thank you! This worked for me but I am having the same issue as Courtney above with the main logo not being perfectly center. Any workaround?

https://shallot-leopard-twxs.squarespace.com/

pw: carden

On 4/29/2021 at 4:04 AM, unavolta said:

Hi @tuanphan! Thank you! This worked for me but I am having the same issue as Courtney above with the main logo not being perfectly center. Any workaround?

https://shallot-leopard-twxs.squarespace.com/

pw: carden

 

On 4/28/2021 at 2:32 PM, Courteney said:

Thank you!!!!

However the logo isn't fully centred, is there any way to fully centre this?

Do you use Personal or Business or Commerce Plan? We can try some JS code to handle this

21 hours ago, tuanphan said:

 

Do you use Personal or Business or Commerce Plan? We can try some JS code to handle this

The site is currently on trial but will be on the Personal plan. Thank you

On 5/4/2021 at 7:02 AM, unavolta said:

The site is currently on trial but will be on the Personal plan. Thank you

Hi. Remove above code & let me know. I will check again.

14 hours ago, tuanphan said:

Hi. Remove above code & let me know. I will check again.

 

Removed. Thank you for your help here.

https://shallot-leopard-twxs.squarespace.com/

pw: carden

@tuanphan Any luck here? Running into the same issue on another site. I added the above code but the logo is off-center

https://www.alisonspada.com/

Looking for Logo (Center) and Navigation (Right) 

18 hours ago, unavolta said:

@tuanphan Any luck here? Running into the same issue on another site. I added the above code but the logo is off-center

https://www.alisonspada.com/

Looking for Logo (Center) and Navigation (Right) 

Can you remove the code? We can check easier

7 hours ago, tuanphan said:

Can you remove the code? We can check easier

@tuanphanDone, thank you.

https://alisonspada.com/

On 9/29/2022 at 12:16 AM, unavolta said:

@tuanphanDone, thank you.

https://alisonspada.com/

 

Add to Design > Custom CSS

@media screen and (min-width:992px) {
.header-title-nav-wrapper {
    padding-top: 3vw;
}
.header-nav {
    position: absolute;
    right: 0;
    text-align: right;
}
.header-layout-branding-center .header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) !important;
}}

On 9/29/2022 at 11:18 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (min-width:992px) {
.header-title-nav-wrapper {
    padding-top: 3vw;
}
.header-nav {
    position: absolute;
    right: 0;
    text-align: right;
}
.header-layout-branding-center .header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) !important;
}}

 

@tuanphan It is working but slightly buggy and the logo is not appearing at first when I load the site, only after I downsize the window and then make it larger again. and then when it is appearing, it cuts it horizontally when it scrolls down. Can you take a look?

Screenshots:

Thank you,

On 10/4/2022 at 3:40 AM, unavolta said:

@tuanphan It is working but slightly buggy and the logo is not appearing at first when I load the site, only after I downsize the window and then make it larger again. and then when it is appearing, it cuts it horizontally when it scrolls down. Can you take a look?

Screenshots:

 

Thank you,

It looks fine to me now. Did you solve it?

On 10/6/2022 at 5:00 AM, tuanphan said:

It looks fine to me now. Did you solve it?

Logo placement looks good now but when you scroll down, the header still cuts the bottom of the logo above the tagline "Creative Direction + Brand Strategy" which in this case is embedded in the logo file. See screenshot. I want the header to cut below the logo tagline so you can still read it while scrolling (ie. more bottom padding).