Jump to content

Pacific: Move logo to left align?

Recommended Posts

  • 1 month later...
  • Replies 9
  • Views 18.8k
  • 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:


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:


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

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



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 TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment


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

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.