Pacific: Move logo to left align?

Is it possible to move the logo in the Pacific template nav bar to the left? I'm having no luck figuring out how.

Thank you SO much guys!

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:

http://www.yourdomain.com/s/filename.png

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.

Hello, could you elaborate on this, write the whole code? I can't figure it out. Thanks!

Found an answer that worked here:

http://answers.squarespace.com/questions/54629/pacific-left-aligning-logo

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:

http://help.squarespace.com/guides/using-the-css-editor

It comes out like this:

One caveat, the mobile site:

@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;
}

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)...

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

The code for left-align the logo works like a charm. But how do I center the logo on mobile?

The code for left-align the logo works like a charm. But how do I center the logo on mobile?

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?

Hi, did you find out how to center the logo on mobile once left justifying the logo in pacfic?

Is there a way to center the site title in mobile view after making these changes? Thanks!

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%; 
   }
}