Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Pacific: Move logo to left align?


9 answers to this question

Recommended Posts

  • 3

@imagelashwood @jessgThe code that was provided above works, but you'll need to also add the following:

I made the logo sit 15% from the left (instead of 10%); Probably still needs work on mobile. — specifically, the MOBILE NAV LINK should be moved to the right (opposite the logo). The template has it on the LEFT by default.

You also need to !important the text alignment too. (to override it fur-sure)

/* Make logo -go-left- */

#header #logoWrapper, 
#header #siteTitleWrapper { 
   position: relative; 
   left: 15%; 
   -webkit-transform: translate(-50%,0); 
   -moz-transform: translate(-50%,0); 
   -ms-transform: translate(-50%,0); 
   -o-transform: translate(-50%,0); 
   transform: translate(-50%,0); 
   text-align: right !important;

#header #mainNavWrapper .index { 
   margin: 0 0 0 12px !important; 
   text-align: right !important;

alt text

There's a gap added by the template to "punch a hole" for the logo to appear in the middle, and make the navigation flow around it. It's basically just inline margin values added. Set those to ZERO by overriding the margins.

#mainNavigation div.collection {
   margin: 0 !important;

#header #mainNavWrapper {
   text-align: right !important;

ALMOST THERE... the menu is now hugging too-far to the right. Add a little positioning to the right side of the menu (#header #mainNavWrapper)... alt text

#header #mainNavWrapper {
   text-align: right !important;
   right: 10%;

alt text



Share this post

Link to post
  • 2

Found an answer that worked here:


The code by @mikecorrales is as follows:

#header #logoWrapper, #header #siteTitleWrapper {position: relative; left: 10%; -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -o-transform: translate(-50%,0); transform: translate(-50%,0); text-align: right;}

#header #mainNavWrapper .index {margin: 0 0 0 12px !important; text-align: right;}

"Note: The !important tag is important to override the left-margin and right-margin in the #header #mainNavWrapper css because the attributes are written in inline CSS in the HTML code. I hope that helps!"

I added it to the Custom CSS area:


It comes out like this:

Alt text

Edited by lashwood

Share this post

Link to post
  • 1

Add this to the bottom of DESIGN > CUSTOM CSS. Change the 830px depending on how many menu items you have. As soon as you see the menu move under the logo, that's the pixel width you should use instead of 830px.

@media only screen and (max-width: 830px) {
#header #logoWrapper, #header #siteTitleWrapper { 
   left: 50%; 

Edited by vigasan

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized Trainer, a Squarespace Expert, and a Circle Member and I would love to help you in any way I can.

Book Live Help | Squarespace Video Tutorials

Share this post

Link to post
  • 0

Hello. I added all the code in order to move the logo to the left and the navigation to the right but I still get the gap where the logo used to be in the middle. How to I sort this out?

Share this post

Link to post
  • -1

First, make sure a logo image is uploaded (this only works if you have a logo image for your site, not a Site Title), then hide the default logo by adding this to the CSS Editor:

#logoWrapper {display:none !important;}

Then, add your Logo Image as HTML within a Navigation Link. You'll need to get the URL to your logo file -- you can upload this to your site using the File tab of any link, and it'll appear in your /s/ folder here:


Add a Navigation link, and use this as your Navigation Title:

<img src="http://www.yourdomain.com/s/filename.png">

Replace "http://www.yourdomain.com/s/filename.png" with the actual URL for your logo image, and for the link, choose your homepage.

Edited by squareology

Share this post

Link to post
This topic is now closed to further replies.

  • Create New...