yeamin Posted October 28, 2019 Share Posted October 28, 2019 how can i move the pacific template logo on the left side? Link to comment
paul2009 Posted October 28, 2019 Share Posted October 28, 2019 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
moeezali Posted October 28, 2019 Share Posted October 28, 2019 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
paul2009 Posted October 28, 2019 Share Posted October 28, 2019 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
moeezali Posted October 30, 2019 Share Posted October 30, 2019 @paul2009 code has been updated. Thanks for raising the issue. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.