Jump to content

Pacific: Move logo to left align?

Recommended Posts

  • 1 month later...
  • Replies 9
  • Created
  • Last Reply

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.

Link to comment
  • 3 months later...

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:

Alt text

Link to comment
  • 8 months later...

@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

layer2.png.d39a264735d29bcc6ebfb83f4dc33f48.png

layer3.png.f193576cfe257784ce9226ea5e68a315.png

Link to comment
  • 5 months later...
  • 4 months later...
  • 8 months later...
  • 2 months later...

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


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.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials

Link to comment

Archived

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

Guest
This topic is now 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.