onika Posted November 22, 2022 Share Posted November 22, 2022 Hello, I am would like to create a split navigation using the code from Station 7, see here /*Make split navigation*/ .header-nav { position: absolute; top: 5px; bottom: 0; margin-top: 0!important; margin-left: -50px!important; } .header-nav-item:nth-of-type(2) { margin-right: 340px!important; } .header-title-logo a { z-index: 1000; position: relative; } This used to work perfectly fine, but since using Fluid Engine, the split does not work anymore and the links are all pushed to the left side. Is there any way to make this work in Fluid Engine? Thank you for your help. Link to comment
tuanphan Posted November 22, 2022 Share Posted November 22, 2022 Fluid Engine won't affect that code. Maybe another code conflict with your code. If you use a Business Plan or higher, you can set layout to Left Nav - Middle Logo, we can give another code to create split navigation. onika 1 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
onika Posted November 22, 2022 Author Share Posted November 22, 2022 @tuanphanThank you for your response. This is really strange as I am hardly using any customised CSS, just the Squarekicker extension. Could that be a reason. The site is still on trial and will launch next month using the Business Plan. It would be great if you can give me another code to create a split navigation. Thank you. Link to comment
tuanphan Posted November 25, 2022 Share Posted November 25, 2022 On 11/22/2022 at 5:53 PM, onika said: @tuanphanThank you for your response. This is really strange as I am hardly using any customised CSS, just the Squarekicker extension. Could that be a reason. The site is still on trial and will launch next month using the Business Plan. It would be great if you can give me another code to create a split navigation. Thank you. You can change header layout to Left Nav - Middle Logo, then share url, we can check & give code easier onika 1 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
onika Posted November 25, 2022 Author Share Posted November 25, 2022 @tuanphanthis is the URL https://stillness-within.squarespace.com/ - I added the following code, but the navigation does not split: /*Make split navigation*/ .header-nav { position: absolute; top: 5px; bottom: 0; margin-top: 0!important; margin-left: -50px!important; } .header-nav-item:nth-of-type(2) { margin-right: 340px!important; } .header-title-logo a { z-index: 1000; position: relative; } There is no code interfering as far as I can tell. Thank you so much for your help! Link to comment
tuanphan Posted November 29, 2022 Share Posted November 29, 2022 On 11/25/2022 at 5:16 PM, onika said: @tuanphanthis is the URL https://stillness-within.squarespace.com/ - I added the following code, but the navigation does not split: /*Make split navigation*/ .header-nav { position: absolute; top: 5px; bottom: 0; margin-top: 0!important; margin-left: -50px!important; } .header-nav-item:nth-of-type(2) { margin-right: 340px!important; } .header-title-logo a { z-index: 1000; position: relative; } There is no code interfering as far as I can tell. Thank you so much for your help! What is access password? 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
Solution tuanphan Posted December 2, 2022 Solution Share Posted December 2, 2022 On 11/29/2022 at 3:58 PM, onika said: stillness Add this to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.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+3) { display: none; } .header-actions.header-actions--right>nav>div:nth-child(-n+2) { display: none; } .header-actions.header-actions--right>nav:nth-child(2) { display: none; } .header-nav-item:not(:last-child) { margin-right: 1.5vw; } </style> Explain Script code will duplicate Left Nav & add to Right of Header First <style> code will hide item 3 + item 4 in Left Nav Second <style> code will hide item 1 + item 2 in Right Nav Third code will hide white space on right onika 1 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
onika Posted December 5, 2022 Author Share Posted December 5, 2022 On 12/2/2022 at 10:41 AM, tuanphan said: Add this to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.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+3) { display: none; } .header-actions.header-actions--right>nav>div:nth-child(-n+2) { display: none; } .header-actions.header-actions--right>nav:nth-child(2) { display: none; } .header-nav-item:not(:last-child) { margin-right: 1.5vw; } </style> Explain Script code will duplicate Left Nav & add to Right of Header First <style> code will hide item 3 + item 4 in Left Nav Second <style> code will hide item 1 + item 2 in Right Nav Third code will hide white space on right Thank you very much, this is working perfectly! tuanphan 1 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