Left Align Title / Logo

Site URL: http://differentkennedy.com

Can't seem to find a thread that shows a CSS solution for left-aligning your site logo / title to stack over the navigation. I've seen plug-ins and paid options but was hoping for a simple css nudge.

Goal is to essentially create a faux vertical navigation margin by taking the automatically right-aligned title [in this case "different kennedy"] and stack it above navigation on the left. Any help is much appreciated! 

This will left-align your site title:

#site-title {
  float:left;
}

This will left-align your site logo (If you're using logo instead):

.header-title-logo {
  float:left;
}

Also, have you experimented by editing the header layout itself?

While editing, go: Edit Site Header > desktop/mobile > Header Layout

21 hours ago, aravsanj said:

This will left-align your site title:

#site-title {
  float:left;
}

This will left-align your site logo (If you're using logo instead):

.header-title-logo {
  float:left;
}

Also, have you experimented by editing the header layout itself?

While editing, go: Edit Site Header > desktop/mobile > Header Layout

Neither of these are working for me unfortunately.

I'm working in an older ver of squarespace so the edit site header isn't a thing; however, I have utilized the inherent layout abilities of the template to stack the navigation and set that position.

 

59 minutes ago, differentkennedy said:

 

Neither of these are working for me unfortunately.

I'm working in an older ver of squarespace so the edit site header isn't a thing; however, I have utilized the inherent layout abilities of the template to stack the navigation and set that position.

 

I didn't notice you're on old version of squarespace. They will only work on 7.1. Can you try the following code see if any of them are working?

 

#upper-logo {
float:left;
}

Or
 

.logo {
float:left;
}

1 hour ago, aravsanj said:

I didn't notice you're on old version of squarespace. They will only work on 7.1. Can you try the following code see if any of them are working?

 

#upper-logo {
float:left;
}

Or
 

.logo {
float:left;
}

 

This works in part; only when the navigation layout is set to "normal" which then reverts navigation to unstacked and center [so you get a left logo with a center horizontal nav] -- is there additional follow-up css that would restack my nav and left align it manually as opposed to using the inherent template settings? 

4 hours ago, differentkennedy said:

This works in part; only when the navigation layout is set to "normal" which then reverts navigation to unstacked and center [so you get a left logo with a center horizontal nav] -- is there additional follow-up css that would restack my nav and left align it manually as opposed to using the inherent template settings? 

Okay. I am not familiar with old the squarespace templates. There is an inbuilt method to stack all the navigation menus? You might want to make the logo a block element then. Logically this should give the logo its on line hence it can occupy the left side of screen on top of the stack.
 

#upper-logo {
display: block !important;
float:left;
}

If this doesn't work, can you change the site back to how it was? With stacked menus and logo on the right? Because I want to see the source code.
 

20 minutes ago, aravsanj said:

Okay. I am not familiar with old the squarespace templates. There is an inbuilt method to stack all the navigation menus? You might want to make the logo a block element then. Logically this should give the logo its on line hence it can occupy the left side of screen on top of the stack.
 

#upper-logo {
display: block !important;
float:left;
}

If this doesn't work, can you change the site back to how it was? With stacked menus and logo on the right? Because I want to see the source code.
 

That almost worked! Kept the stacked navigation and the left alignment, but the logo + stack are side by side now and for this to work I'd need the navigation to appear under the logo. 

Knocked the design back to stacked with header on right [currently set to title rather than a logo image so I could display both the logo css appearance as well as offer source code for alignment]

Note I'd be willing to compromise here and forgo the navigation stack for a horizontal layout, but would still need it to appear under the logo. 

3 minutes ago, aravsanj said:

Try this (on top of the code above): 

#upper-logo {
  position: absolute !important; 
  }

#topNav {
    position: relative !important;
    top:23px; /*Change value here to increase padding between logo and stack*/
    }

 

Awesome!! That did it - thank you so much for your help with this! I thought i tried everything under topNav lol -- appreciate it!!

5 minutes ago, differentkennedy said:

Awesome!! That did it - thank you so much for your help with this! I thought i tried everything under topNav lol -- appreciate it!!

My pleasure!

5 minutes ago, aravsanj said:

My pleasure!

Whoops! One last thing - looks like it's keeping the right-hand logo/title placement as well and template inherent color changes etc seem to apply to both instances any last tweaks 🙂

2 minutes ago, differentkennedy said:

Whoops! One last thing - looks like it's keeping the right-hand logo/title placement as well and template inherent color changes etc seem to apply to both instances any last tweaks 🙂

Did you mean when the right-side title is removed, the logo and menu stops being stacked on top?

5 minutes ago, aravsanj said:

Did you mean when the right-side title is removed, the logo and menu stops being stacked on top?

If this is the case, try replace topNav code with this one:

#topNav {
float: left !important;
position: relative !important;
top:23px;
left:-132px;
}

10 minutes ago, aravsanj said:

If this is the case, try replace topNav code with this one:

#topNav {
float: left !important;
position: relative !important;
top:23px;
left:-132px;
}

 

Took a little wrangling on the left position but worked like a charm! Thanks again! 

On 6/7/2021 at 6:16 AM, aravsanj said:

Try this (on top of the code above): 

#upper-logo {
  position: absolute !important; 
  }

#topNav {
    position: relative !important;
    top:23px; /*Change value here to increase padding between logo and stack*/
    }

 

Hi, Does anyone know in Squarespace 7.1 how to set the logo to sit in the RHS of the site header with the navigation menu sitting on the LHS (this isn't a default layout option that is offered)

23 hours ago, lovefind said:

Hi, Does anyone know in Squarespace 7.1 how to set the logo to sit in the RHS of the site header with the navigation menu sitting on the LHS (this isn't a default layout option that is offered)

 

Can you share link to your site?

On 6/5/2021 at 7:41 AM, aravsanj said:

This will left-align your site title:

#site-title {
  float:left;
}

This will left-align your site logo (If you're using logo instead):

.header-title-logo {
  float:left;
}

Also, have you experimented by editing the header layout itself?

While editing, go: Edit Site Header > desktop/mobile > Header Layout

Hi there! I'm also trying to do something similar -- align my client's site title logo further to the left. I've tried about 20+ codes and haven't hit it yet! Any chance you can help?

Site is Rinnegatiandco.com and password is RENEGADE

12 hours ago, MadcapCreative said:

 

Hi there! I'm also trying to do something similar -- align my client's site title logo further to the left. I've tried about 20+ codes and haven't hit it yet! Any chance you can help?

Site is Rinnegatiandco.com and password is RENEGADE

 

Logo is fine. Did you solve?

6 hours ago, tuanphan said:

Logo is fine. Did you solve?

I did! Thank you!