Excellent, total beginner here and successfully done the job. Thank you for your easy to follow instructions and free codes. First time I've used any type of coding. Definately signing up for your Free Course.
LE: Now it works flawlessly. Thank you for giving this out for free. [Previous message: The code as it is right now makes the menu disappear altogether. I tried it on a few of my sites with the same result.]
This worked perfectly thank you! Is there a way to adjust the width so the links are on the edge of the site (e.g. far left hand side and far right hand side) and the logo remains centred?
Hey, thank you so much for this tutorial! I implemented the code on my site but for some reason the padding on either sides of the split navigation are off. Any idea how I can fix this?🙏
Thank you so much for this! It was working perfectly but one day the nav duplicated itself stacked ontop of the logo and the only way to get rid of it was to take out the javascript. I thought I would just start from scratch but it is still doing it again. There is currently nothing in my CSS and that is the only code in the footer. Any ideas how to fix it?
This worked great! However, on super wide screens, the navigation links start to wrap. I have changed all the settings, but it still does it. Can you help? I am trying to prevent the wrapping at 38 inches or 3840px wide.
Thank you so much for this code, however i'm using it alongside your sticky header code as in the video and seem to be running into the issue the header now seems to be stuck in a smaller device view? Any ideas on that? It goes back to full device width once I take out the sticker header code? I haven't touched either code at all 😅
Do you mean the code where the header starts below the first section on the page? It is possible they aren’t compatible because I built them as their own standalone solutions. If you need both then please send me an email and I can give you a quote for re-writing the code to be compatible with both.
Is there any way to do this on a squarespace personal plan? I'm not able to do the footer code injection unless I upgrade to the business plan, and if I solely enter the custom CSS it makes my nav menu disappear.
Hi! Do you know what code I could use to make the site title centered and have the navigation stay on the far right? They don't give that option for the logo layout. Thank you!
When the Developer Tools dialog is open, you select the vertical ellipsis (all the way to the right) and can then choose the docking position. There's a pop-out icon
Hello, the code on the page worked great, I am trying decrease the heigh of the header, is there a code I should add to do this? Much appreciate your response.
Hey thank you for the video! I'm having an issue where if I shrink the screen the navigation buttons become larger as they start wrapping underneath the logo. I have been playing around but don't seem to find out why this happens. Thanks!
I'm not sure why that would be happening. If you would like to hire me for custom code support I would be happy to take a look. You can do so through my website!
Squarespace 7.0 uses different templates, so some templates allow for this layout. Templates in the brine family can do this header layout by putting links in the primary and secondary navigation and then setting the navigation areas appropriately
The mega menu requires links to be present on page load so the dropdowns can be added. This split navigation method requires cloning the primary navigation, so since the links are not present on page load, the mega menu pages can't be added.
Hey Chris, this is awesome. Sadly I am running into an issue when trying to implement it on my site where the text of the items on the left of the logo disappear on selected pages. The links are still clickable however without the text there it would be impossible for the use to find it. Have you got any ideas as to why this is?
Hi. split worked well. I donated 🙂 however, links become very small. links are about half the size prior to when code is applied. i set the action sides to 50 px, no change in font size
Thanks for sharing. Actually i was a bit disappointed Squarespace didn't offer this kind of header layout. Though i can't get it to work on mine (disabled all other css code) when i resize the window below 1200px the items appear under the logo and if i increase the size again (above the 1200px stack limit) of the window i will see the items appear for a blink at the left side, though only 3 of them - although i set splitAfterItem to 2. Is there anything else to set up in the header options? (the layout you chose was the one i had in place)
Excellent, total beginner here and successfully done the job. Thank you for your easy to follow instructions and free codes. First time I've used any type of coding. Definately signing up for your Free Course.
Awesome to hear!
Wow, excellent! Thanks so much, exactly what I was looking for. Easy to understand and follow. Thumbs up 👍🏻
Great to hear!
LE: Now it works flawlessly. Thank you for giving this out for free. [Previous message: The code as it is right now makes the menu disappear altogether. I tried it on a few of my sites with the same result.]
I have updated the CSS and code on the blog post. Can you try again? It should work now!
@@SEWebDesign Now it works flawlessly. Thank you for giving this out for free.
@@vdodan Ok great! You are welcome!
very helpful, thank you
No problem! Glad it was helpful!
This worked perfectly thank you! Is there a way to adjust the width so the links are on the edge of the site (e.g. far left hand side and far right hand side) and the logo remains centred?
Hi Megan, yes but that would take additional customization so send me an email if you are interested in it.
THANK. YOU. So helpful.
I’m so glad!
Super Helpful! thanks so much.
I’m so glad! You are welcome!
Hey, thank you so much for this tutorial! I implemented the code on my site but for some reason the padding on either sides of the split navigation are off. Any idea how I can fix this?🙏
There are variables in the CSS to adjust the spacing. Were you able to get it to work?
How do you move the social media icons to the left next to the contact button?
Thank you so much for this! It was working perfectly but one day the nav duplicated itself stacked ontop of the logo and the only way to get rid of it was to take out the javascript. I thought I would just start from scratch but it is still doing it again. There is currently nothing in my CSS and that is the only code in the footer. Any ideas how to fix it?
Make sure you include the CSS as well!
This worked great! However, on super wide screens, the navigation links start to wrap. I have changed all the settings, but it still does it. Can you help? I am trying to prevent the wrapping at 38 inches or 3840px wide.
Please use my code support form on my website with the link to your site so I can take a look.
Thank you so much for this code, however i'm using it alongside your sticky header code as in the video and seem to be running into the issue the header now seems to be stuck in a smaller device view? Any ideas on that? It goes back to full device width once I take out the sticker header code? I haven't touched either code at all 😅
Do you mean the code where the header starts below the first section on the page? It is possible they aren’t compatible because I built them as their own standalone solutions. If you need both then please send me an email and I can give you a quote for re-writing the code to be compatible with both.
Is there any way to do this on a squarespace personal plan? I'm not able to do the footer code injection unless I upgrade to the business plan, and if I solely enter the custom CSS it makes my nav menu disappear.
The code injection is needed so unfortunately you can’t do this on the personal plan.
Hi! Do you know what code I could use to make the site title centered and have the navigation stay on the far right? They don't give that option for the logo layout. Thank you!
That would require other custom CSS. You can hire me for those types of changes through my website!
I'm very beginner. I'm wondering how do you get the "inspect" to pop out? Instead of staying to the right of the screen? thank you
When the Developer Tools dialog is open, you select the vertical ellipsis (all the way to the right) and can then choose the docking position. There's a pop-out icon
thank you@@SEWebDesign
@@traciemccarthy13 no problem!
Hello, the code on the page worked great, I am trying decrease the heigh of the header, is there a code I should add to do this? Much appreciate your response.
When editing the header there is a padding setting that you can drag down. Also consider making your logo smaller. No need to use CSS.
This video was so helpful, thank you! The right side of the menu disappeared when I changed the logo. Any idea why this happened?
Did it come back when you hit save? The code runs on page load so if something changes hitting save will trigger it to run again.
Thank you for sharing this! I'm getting a syntax error on this line (&.has-nav .header-nav); am I doing something wrong on my end?
Sorry about that! I have fixed the CSS on the blog page!
Hey thank you for the video! I'm having an issue where if I shrink the screen the navigation buttons become larger as they start wrapping underneath the logo. I have been playing around but don't seem to find out why this happens. Thanks!
I'm not sure why that would be happening. If you would like to hire me for custom code support I would be happy to take a look. You can do so through my website!
Hi! Is there a way to do this with Squarespace 7.0 also?
Squarespace 7.0 uses different templates, so some templates allow for this layout. Templates in the brine family can do this header layout by putting links in the primary and secondary navigation and then setting the navigation areas appropriately
Hello - may I ask why this code is not compatible with your mega menu plugin?
The mega menu requires links to be present on page load so the dropdowns can be added. This split navigation method requires cloning the primary navigation, so since the links are not present on page load, the mega menu pages can't be added.
Hi Chris. Somehow is not working for me, it lists the menu instead of splitting it. Have you got any ideas as to why is this?
Do you have the header layout set to the correct one?
@@SEWebDesign yes
@@luciaz9088 you can send me an email to hire me for custom code help through my website!
Hey Chris, this is awesome. Sadly I am running into an issue when trying to implement it on my site where the text of the items on the left of the logo disappear on selected pages. The links are still clickable however without the text there it would be impossible for the use to find it. Have you got any ideas as to why this is?
Can you email me the link to the site? I am not sure why that would be happening but I can take a quick look.
Hi. split worked well. I donated 🙂
however, links become very small. links are about half the size prior to when code is applied. i set the action sides to 50 px, no change in font size
I got your email and have followed up there!
i doesnt work for me, it removes my links and i only see my website name (split nav) someone tips?
Make sure you have the correct desktop header layout, otherwise it might not appear correctly
Thanks for sharing. Actually i was a bit disappointed Squarespace didn't offer this kind of header layout. Though i can't get it to work on mine (disabled all other css code) when i resize the window below 1200px the items appear under the logo and if i increase the size again (above the 1200px stack limit) of the window i will see the items appear for a blink at the left side, though only 3 of them - although i set splitAfterItem to 2. Is there anything else to set up in the header options? (the layout you chose was the one i had in place)
Can you send me an email with the link to the site? I'll see if I can see what might be going on
I have updated the footer code injection code on the blog post. I think that might have been the issue.
@@SEWebDesign oh sorry didn't see your first message 🙈 I'll check it out later and give you feedback. Right now it's not active on my site.
@@andy.photoandfilm Sounds good!