Jump to content

Recommended Posts

  • Replies 21
  • Created
  • Last Reply

Top Posters In This Topic

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?

Example.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 weeks later...
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?

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment
  • 3 months later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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! 

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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. 

Screen Shot 2022-08-29 at 12.10.57 PM.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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. 🙂

Link to comment
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. 🙂

IMG_8679.PNG

Link to comment
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. 🙂

IMG_8679.PNG

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment
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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.