Jump to content
Go to solution Solved by Guest,

Recommended Posts

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! 

Link to comment
  • Replies 18
  • Views 3.8k
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to comment
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.

 

Link to comment
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;
}

 

Link to comment
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? 

Link to comment
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.
 

Edited by aravsanj
Link to comment
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. 

Edited by differentkennedy
Link to comment
  • Solution
1 hour ago, differentkennedy said:

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. 

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*/
    }

 

Edited by aravsanj
Link to comment
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!!

Link to comment
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!

Link to comment
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?

Link to comment
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;
}

 

Link to comment
  • 2 months later...
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)

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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

 

Link to comment
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?

image.png.19ab03e2760b7fd26da9ecf79241343f.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.