Centre Logo and Right Align Navigation

Site URL: https://therapywa.squarespace.com

Hi All, 

The Squarespace navigation options seem to include all options except a centred logo with a right aligned navigation. Is anyone able to assist with custom CSS to centre the logo? I already have the navigation right aligned.

Website link: https://therapywa.squarespace.com

Password: TherapyWA2022

Thanks in advance! 💫

You can choose layout: Left Navigation - Middle Logo. Then we can give some code to move Nav from Left to right. I think it will be easier.

With current layout, try this to Design > Custom CSS

@media screen and (min-width:992px) {
.header-title-nav-wrapper {
    flex: 1 1 50%;
    justify-content: center; 
}
.header-title {
  flex-grow: 1;
    flex-shrink: 1;
}
.header-nav {
    flex-grow: 0.5;
    flex-shrink: 1;
  padding: 0 !important; 
}
.header-title-logo {
text-align: right;
}
}

On 10/17/2022 at 8:10 AM, tuanphan said:

You can choose layout: Left Navigation - Middle Logo. Then we can give some code to move Nav from Left to right. I think it will be easier.

With current layout, try this to Design > Custom CSS

@media screen and (min-width:992px) {
.header-title-nav-wrapper {
    flex: 1 1 50%;
    justify-content: center; 
}
.header-title {
  flex-grow: 1;
    flex-shrink: 1;
}
.header-nav {
    flex-grow: 0.5;
    flex-shrink: 1;
  padding: 0 !important; 
}
.header-title-logo {
text-align: right;
}
}

 

Thanks for the suggestion, when I pasted this code however nothing changed.. I've left that code in there for now. Any ideas?? 

On 10/23/2022 at 10:11 AM, parispeak said:

Thanks for the suggestion, when I pasted this code however nothing changed.. I've left that code in there for now. Any ideas?? 

Did you changed header layout since my comment? Do you still need help?

On 10/26/2022 at 8:03 AM, tuanphan said:

Did you changed header layout since my comment? Do you still need help?

I changed the header layout to left navigation with middle logo and then tried your code - which I didn't have any luck with! So yes still need help! Thank you

On 11/2/2022 at 10:23 AM, parispeak said:

I changed the header layout to left navigation with middle logo and then tried your code - which I didn't have any luck with! So yes still need help! Thank you

Use this new code

@media screen and (min-width:992px) {
.header-title-nav-wrapper {
    flex: 1 1 50%;
    flex-direction: row-reverse;
}
.header-title {
  flex-grow: 1;
    flex-shrink: 1;
}
.header-nav {
    flex-grow: 0.5;
    flex-shrink: 1;
  padding: 0 !important; 
}
.header-title-logo {
text-align: right;
}
  
.header-display-desktop {flex-direction: row-reverse;}

.header-nav {
    text-align: right;
}
}