Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Left Align Title / Logo


Question

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

15 answers to this question

Recommended Posts

  • 0
Posted (edited)
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

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
  • 0

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

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

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

 

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
  • 0
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
  • 0
Posted (edited)
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

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
  • 0
Posted (edited)
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
  • 0
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
  • 0
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!

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

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

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

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

 

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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