differentkennedy Posted June 5, 2021 Share Posted June 5, 2021 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
aravsanj Posted June 5, 2021 Share Posted June 5, 2021 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 Sharing virtual tactics for an abstract worldBlogger @ humaneer.org Link to comment
differentkennedy Posted June 6, 2021 Author Share Posted June 6, 2021 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
aravsanj Posted June 6, 2021 Share Posted June 6, 2021 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; } Sharing virtual tactics for an abstract worldBlogger @ humaneer.org Link to comment
differentkennedy Posted June 6, 2021 Author Share Posted June 6, 2021 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
aravsanj Posted June 6, 2021 Share Posted June 6, 2021 (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 June 6, 2021 by aravsanj Sharing virtual tactics for an abstract worldBlogger @ humaneer.org Link to comment
differentkennedy Posted June 6, 2021 Author Share Posted June 6, 2021 (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 June 6, 2021 by differentkennedy Link to comment
Solution aravsanj Posted June 6, 2021 Solution Share Posted June 6, 2021 (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 June 6, 2021 by aravsanj Sharing virtual tactics for an abstract worldBlogger @ humaneer.org Link to comment
differentkennedy Posted June 6, 2021 Author Share Posted June 6, 2021 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
aravsanj Posted June 6, 2021 Share Posted June 6, 2021 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! Sharing virtual tactics for an abstract worldBlogger @ humaneer.org Link to comment
differentkennedy Posted June 6, 2021 Author Share Posted June 6, 2021 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 🙂 Link to comment
aravsanj Posted June 6, 2021 Share Posted June 6, 2021 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? Sharing virtual tactics for an abstract worldBlogger @ humaneer.org Link to comment
aravsanj Posted June 6, 2021 Share Posted June 6, 2021 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; } Sharing virtual tactics for an abstract worldBlogger @ humaneer.org Link to comment
differentkennedy Posted June 6, 2021 Author Share Posted June 6, 2021 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! aravsanj 1 Link to comment
lovefind Posted August 26, 2021 Share Posted August 26, 2021 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
tuanphan Posted August 27, 2021 Share Posted August 27, 2021 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 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
Guest Posted October 1, 2022 Share Posted October 1, 2022 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
tuanphan Posted October 2, 2022 Share Posted October 2, 2022 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Guest Posted October 2, 2022 Share Posted October 2, 2022 6 hours ago, tuanphan said: Logo is fine. Did you solve? I did! Thank you! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment