Jump to content

Logo moving

Recommended Posts

  • Replies 4
  • 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

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

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.