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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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
Natasha-Siena Posted April 6, 2023 Share Posted April 6, 2023 Hi, my navbar has disapeared on the right side, it was there yesterday. Last night i paid for the business plan, is there something wrong with my code? Please let me know as soon as possible how i can fix this as the client will notice soon. https://tuna-cranberry-bmdk.squarespace.com/config/pages What information do you need to enter the site? Thank you Link to comment
paul2009 Posted April 6, 2023 Share Posted April 6, 2023 44 minutes ago, Natasha-Siena said: What information do you need to enter the site? As your website isn't public yet, we need you to set a site-wide password and share it with us. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
Natasha-Siena Posted April 6, 2023 Share Posted April 6, 2023 I think its because i upgraded to a personal plan not business therefore my footer injected code is not acessable anymore unless i upgrade to business. Link to comment
tuanphan Posted April 8, 2023 Share Posted April 8, 2023 On 4/6/2023 at 10:34 PM, Natasha-Siena said: I think its because i upgraded to a personal plan not business therefore my footer injected code is not acessable anymore unless i upgrade to business. You can setup an access password, we can give CSS code for Personal Plan 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
tevestudios Posted November 28, 2023 Share Posted November 28, 2023 @tuanphan I have the same problem - the right side disappears on my site. (It is visible in my editor, but not on the 'live' site). Do you have any recommendations how to fix it? Site: https://www.tevestudios.com/ Password: tessaveen Link to comment
tuanphan Posted November 30, 2023 Share Posted November 30, 2023 On 11/28/2023 at 6:57 PM, tevestudios said: @tuanphan I have the same problem - the right side disappears on my site. (It is visible in my editor, but not on the 'live' site). Do you have any recommendations how to fix it? Site: https://www.tevestudios.com/ Password: tessaveen Animation caused this, it created a code with opacity 0 Use this code to Custom CSS box to override it div.header-nav-item a { opacity: 1 !important; } 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
christined Posted March 20 Share Posted March 20 Hi, @tuanphan. I am having same problem as @tevesudios. I implemented footer injection script you shared here but am getting inconsistent results with nav showing on right side -- it is either hidden or in wrong color, and varies from page-to-page, whether or not I am logged in, and between Safari and Chrome. Should I also have some CSS to support that script? Thanks for any help you can offer! Christine angelaart.squarespace.com pw: angela Link to comment
tuanphan Posted March 25 Share Posted March 25 On 3/21/2024 at 1:25 AM, christined said: Hi, @tuanphan. I am having same problem as @tevesudios. I implemented footer injection script you shared here but am getting inconsistent results with nav showing on right side -- it is either hidden or in wrong color, and varies from page-to-page, whether or not I am logged in, and between Safari and Chrome. Should I also have some CSS to support that script? Thanks for any help you can offer! Christine angelaart.squarespace.com pw: angela I see you solved? I checked on some pages and all are fine https://angelaart.squarespace.com/news 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
christined Posted March 30 Share Posted March 30 On 3/25/2024 at 3:26 AM, tuanphan said: I see you solved? I checked on some pages and all are fine https://angelaart.squarespace.com/news. Yes, thank you! I did solve it! I very much appreciate your attempt to help. Link to comment
christined Posted March 30 Share Posted March 30 Just in case it can help anyone else, I solved my issue with help implementing solution in this post: Link to comment
samschwan Posted July 25 Share Posted July 25 (edited) Hello! I've tried adding this code to my site and its almost worked but for some reason the right side of the navigation is doubled. I'm also having trouble center aligning the text, minimizing the height of the nav bar, and reducing the padding on the sides of the nav. I attached some screenshots of how it looks and how I'd like it to look. I appreciate any insight you might have! Thanks so much in advance. url: https://sheep-rust-mcg5.squarespace.com/ password: treesandflowers Edited July 25 by samschwan Updated screenshot Link to comment
tuanphan Posted July 28 Share Posted July 28 On 7/26/2024 at 2:09 AM, samschwan said: Hello! I've tried adding this code to my site and its almost worked but for some reason the right side of the navigation is doubled. I'm also having trouble center aligning the text, minimizing the height of the nav bar, and reducing the padding on the sides of the nav. I attached some screenshots of how it looks and how I'd like it to look. I appreciate any insight you might have! Thanks so much in advance. url: https://sheep-rust-mcg5.squarespace.com/ password: treesandflowers Use this code to Website Tools > Custom CSS nav.header-nav-list + nav.header-nav-list { display: none; } 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
samschwan Posted August 22 Share Posted August 22 @tuanphan Thanks so much for responding! 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