Jump to content

Split Navigation flushed to the edge of the page

Recommended Posts

Site URL: https://papaya-plums-lrzm.squarespace.com/

Hello, 

I've created a split navigation on the website I'm working on. Essentially I would like the items left of the logo to be flushed to the left of the page, and the items on the right side of the logo to be flushed to the right side of the page. What's the best way to achieve this?

Website is: 

https://papaya-plums-lrzm.squarespace.com/

password: lucyinthesky

And attached is a screenshot of the design I'm trying to achieve. 

Thanks in advance!

Screen Shot 2022-06-28 at 10.46.08 pm.png

Link to comment
  • Replies 8
  • Views 372
  • Created
  • Last Reply

Top Posters In This Topic

9 hours ago, holahannah said:

Sure - I removed the split navigation code that I was using, if that helps?

THank you. Can you change header layout to Left Nav - Middle Logo? Then I will give code to split half of navigation and move to right

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
13 hours ago, holahannah said:

@tuanphan Thank you so much! Have changed the header layout to Left Nav - Middle Logo. 

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('nav.header-nav-list').clone().insertBefore('.header-actions.header-actions--right>.showOnMobile');
	});
	</script>
<style>
  .header-nav nav>div:nth-child(n+4) {
    display: none;
}
.header-actions.header-actions--right>nav>div:nth-child(-n+3) {
    display: none;
}
.header-actions.header-actions--right>nav:nth-child(2) {
    display: none;
}
.header-nav-item:not(:last-child) {
    margin-right: 1.5vw;
}
  div.header-nav-item a {
    color: white;
}
</style>

 

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
On 7/3/2022 at 8:09 AM, holahannah said:

Hi @tuanphan, do you know if there is a way to hide the navigation items from the mobile version - ideally just want the navigation to display when the hamburger menu is open. Thanks!

Screen Shot 2022-07-02 at 8.06.26 pm.png

Add this code under

<style>
  @media screen and (max-width:991px) {
  nav.header-nav-list {
    display: none;
}
  }
</style>

 

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.