Jump to content

Center Logo on Mobile

Go to solution Solved by Ziggy,

Recommended Posts

Evening folks, 

I've just managed to hide the menu burger from my mobile site with some custom code from this forum. I have a personal plan. The logo is unfortuantely now not centered on the page and is leaning quite heavily to the right. 

What code would I need to add to align the logo to the center on mobile? And would I simply add it below the previous custom code?

Thank you in advance.

332251888_738486434533560_7096315346680578627_n.jpg

Link to comment
  • Solution
11 hours ago, cicc1991 said:

What code would I need to add to align the logo to the center on mobile? And would I simply add it below the previous custom code?

Try adding this to your custom CSS:

@media only screen and (max-width:767px) {
  .header .header-mobile-layout-logo-center-nav-right .header-display-mobile .header-title {
    padding-left:0px;
  }
}

Hope that helps!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 3 months later...

I am trying to do the same thing, but there is something wrong in my code elsewhere. After adding social media icons to my header, I can't get the logo centered. I am sure there is something I am missing. Every time I get the logo centered, my social icons disappear.

www.flippedpot.com

I already have the following:

.header .header-actions, .header .header-actions-action--social {display: flex}
.header .header-title-nav-wrapper {flex: 47%;}
@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
  .header-actions--center .header-actions-action--social .icon:not(:first-child) {margin-left: 1vw;}}
@media only screen and (max-width:767px) {.header .header-mobile-layout-logo-center-nav-right .header-display-mobile .header-title {padding-right: 1vw; }}

 

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.