holahannah Posted June 29, 2022 Share Posted June 29, 2022 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! Link to comment
tuanphan Posted June 29, 2022 Share Posted June 29, 2022 I see they overlap here. Can you disable temporarily your code? I think we can test & give the better code 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
holahannah Posted June 29, 2022 Author Share Posted June 29, 2022 Sure - I removed the split navigation code that I was using, if that helps? Link to comment
tuanphan Posted June 30, 2022 Share Posted June 30, 2022 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 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
holahannah Posted June 30, 2022 Author Share Posted June 30, 2022 @tuanphan Thank you so much! Have changed the header layout to Left Nav - Middle Logo. Link to comment
tuanphan Posted July 1, 2022 Share Posted July 1, 2022 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 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
holahannah Posted July 1, 2022 Author Share Posted July 1, 2022 Amazing, that worked - thanks so much! Link to comment
holahannah Posted July 3, 2022 Author Share Posted July 3, 2022 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! Link to comment
tuanphan Posted July 4, 2022 Share Posted July 4, 2022 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! 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 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment