Center a logo

A solid color background. JUST logo in center of the screen.

Is this possible using Squarespace 7.1?

1 hour ago, Billy_by_the_Sea said:

A solid color background. JUST logo in center of the screen.

Is this possible using Squarespace 7.1?

Can you share your site with the protected password so we can take a look?

First, add a Logo. Dont add any items to Main Navigation

Next, add this to Design > Custom CSS

/* center logo */
.header-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    text-align: center;
}
.burger-inner {
	display: none !important;
}

On 3/22/2022 at 5:23 AM, tuanphan said:

First, add a Logo. Dont add any items to Main Navigation

Next, add this to Design > Custom CSS

/* center logo */
.header-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    text-align: center;
}
.burger-inner {
	display: none !important;
}

 

Hi! Im also having problem with logo that wont be in center.
Site: https://www.avanor-acoustics.com/en/loudspeakers
I have tried at least 10 different codes, but no success. Im using 7.0 Brine (Ethan). The logo is perfectly centred only on mobile while holding it vertically. Could you please take a look what might be the reason for that?

On 4/21/2022 at 6:49 PM, Alvis said:

Hi! Im also having problem with logo that wont be in center.
Site: https://www.avanor-acoustics.com/en/loudspeakers
I have tried at least 10 different codes, but no success. Im using 7.0 Brine (Ethan). The logo is perfectly centred only on mobile while holding it vertically. Could you please take a look what might be the reason for that?

Find this CSS & edit 11px to 0px

header.Header.Header--top {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 11px;
    width: 100%;
    background: transparent;
}

On 4/24/2022 at 9:37 AM, tuanphan said:

Find this CSS & edit 11px to 0px

header.Header.Header--top {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 11px;
    width: 100%;
    background: transparent;
}

 

Hi, I found the solution. It should be set to 11 or 12 px. If it is set to 0px than it is not centered. Thanks anyway!

Hi @tuanphan we are having a similar issue with a client's site where the logo wont center on the home page that we've customized. Would you be able to take a look for us? Thank you!

https://oval-sprout-4yrg.squarespace.com/

Password: DoveLove2022!

On 8/17/2022 at 1:39 AM, MinerMan2022 said:

Hi @tuanphan we are having a similar issue with a client's site where the logo wont center on the home page that we've customized. Would you be able to take a look for us? Thank you!

https://oval-sprout-4yrg.squarespace.com/

Password: DoveLove2022!

Don't remove any code in your current code

Add this to Design > Custom CSS

/* center logo */
.header-title-logo {
    margin: 0 !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

7 hours ago, tuanphan said:

Don't remove any code in your current code

Add this to Design > Custom CSS

/* center logo */
.header-title-logo {
    margin: 0 !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

 

That worked perfectly! Thank you so much 🙂

2 hours ago, MinerMan2022 said:

That worked perfectly! Thank you so much 🙂

Hi @tuanphan after I implemented the code above the margin for the bottom of the logo is allowing things to creep up on top of it especially on mobile. I tried adding margin to just the bottom and removing the margin: 0; !important code but nothing happened. Is there another for me to add some space to give this room to breathe? Let me know. Thank you so much! 

On 8/19/2022 at 1:29 AM, MinerMan2022 said:

Hi @tuanphan after I implemented the code above the margin for the bottom of the logo is allowing things to creep up on top of it especially on mobile. I tried adding margin to just the bottom and removing the margin: 0; !important code but nothing happened. Is there another for me to add some space to give this room to breathe? Let me know. Thank you so much! 

Change above code to this

@media screen and (min-width:992px) {
/* center logo */
.header-title-logo {
    margin: 0 !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}
}

On 8/20/2022 at 8:31 PM, tuanphan said:

Change above code to this

@media screen and (min-width:992px) {
/* center logo */
.header-title-logo {
    margin: 0 !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}
}

 

I tried that but it didn't work. Any other suggestions? @tuanphan

On 8/22/2022 at 11:59 PM, MinerMan2022 said:

I tried that but it didn't work. Any other suggestions? @tuanphan

Can you add & keep the code? We can check it again easier

Sure thing @tuanphan. Sorry about that. The code as been added back in. I just noticed the logo on the home page is not centered anymore. Can you take a look at this? Thank you. 

21 hours ago, MinerMan2022 said:

Sure thing @tuanphan. Sorry about that. The code as been added back in. I just noticed the logo on the home page is not centered anymore. Can you take a look at this? Thank you. 

Try this new code

@media screen and (max-width:991px) {
/* center logo */
.header-mobile-logo {
    margin: 0 !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    margin: 0 !important;
    background-position: center !important;
}
}

3 hours ago, tuanphan said:

Try this new code

@media screen and (max-width:991px) {
/* center logo */
.header-mobile-logo {
    margin: 0 !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    margin: 0 !important;
    background-position: center !important;
}
}

 

That worked perfectly. Thank you so much @tuanphan. 🙂

6 minutes ago, MinerMan2022 said:

That worked perfectly. Thank you so much @tuanphan. 🙂

Hi @tuanphan one last thing we noticed is the padding under the logo is still not coming through on mobile. Please see the screenshot below. Any way to adjust this? Let us know. Thank you for your help again.

3 hours ago, tuanphan said:

Try this new code

@media screen and (max-width:991px) {
/* center logo */
.header-mobile-logo {
    margin: 0 !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    margin: 0 !important;
    background-position: center !important;
}
}

 

That worked perfectly. Thank you so much @tuanphan. 🙂

15 hours ago, MinerMan2022 said:

Hi @tuanphan one last thing we noticed is the padding under the logo is still not coming through on mobile. Please see the screenshot below. Any way to adjust this? Let us know. Thank you for your help again.

That worked perfectly. Thank you so much @tuanphan. 🙂

What should it look like? Move down logo, to make it overlap image?

On 8/31/2022 at 4:08 AM, tuanphan said:

What should it look like? Move down logo, to make it overlap image?

Hi @tuanphan we would like the logo to have plenty of padding at the bottom of it. We would prefer it not overlap anything. Let me know if you have any other questions. Thank you. 

On 9/2/2022 at 4:32 AM, MinerMan2022 said:

Hi @tuanphan we would like the logo to have plenty of padding at the bottom of it. We would prefer it not overlap anything. Let me know if you have any other questions. Thank you. 

Try this CSS

@media screen and (max-width:767px) {
#page {
    padding-top: 50px;
}
}

On 9/3/2022 at 7:16 AM, tuanphan said:

Try this CSS

@media screen and (max-width:767px) {
#page {
    padding-top: 50px;
}
}

 

Hi @tuanphan with the new code the logo is jumping whenever you go to a new page. We would just like the logo to be at the top and everything else on the page to display under it. Is there a way to add padding to the bottom of the logo? I tried changing "padding-top" to "padding-bottom" in the code you provided but its not working. Let us know. Thank you!

20 hours ago, MinerMan2022 said:

Hi @tuanphan with the new code the logo is jumping whenever you go to a new page. We would just like the logo to be at the top and everything else on the page to display under it. Is there a way to add padding to the bottom of the logo? I tried changing "padding-top" to "padding-bottom" in the code you provided but its not working. Let us know. Thank you!

Hi @tuanphan just following up on this. Thank you!