Jump to content

Logo moving

Recommended Posts

  • Replies 4
  • Views 2.7k
  • Created
  • Last Reply

Pacific has been specifically styled for a centred logo, with other elements coded to fit around this layout.

If you prefer a left-aligned logo, I recommend you switch to a newer Brine-family template as this has more options, and typically works more seamlessly than older templates. It has options in Site Styles for the position of the logo and many other elements. See Switching templates

 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Hey yeamin,

Here's the solution to move the logo to left on pacific template. 

Just paste this css inside Design >  Custom CSS  

 

#header .header-inner {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

#header #siteTitleWrapper {
    left: 0 !important;
    text-align: left;
    transform: initial !important;
}

#header #headerNav {
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#header #headerNav #mainNavWrapper #mainNavigation > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#header .header-inner div#logoWrapper {
    left: 0 !important;
    transform: initial !important;
}

#header .header-inner div#logoWrapper a {
    text-align: left !important;
}

@media(max-width: 768px) {
    #header .header-inner label[for="mobileNavToggle"] {
        left: auto !important;
        right: 30px !important;
        top: 50px !important;
    }
}

Link to comment

Be aware that the code above won't work if the logo is an image, nor at certain resolutions due to the lack of specificity.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.