mariagiuliacastellani Posted October 24, 2021 Share Posted October 24, 2021 Site URL: https://indigo-flamingo-amw3.squarespace.com/config/ Hello, my client wants her header to be navigation to left - logo in the middle - navigation to the right (see exact picture of what she wants) but I cannot seem to get it without CSS. Would anyone know where and what code I need to insert to get this result? Thank you in advance! Link to comment
Beyondspace Posted October 25, 2021 Share Posted October 25, 2021 8 hours ago, mariagiuliacastellani said: Site URL: https://indigo-flamingo-amw3.squarespace.com/config/ Hello, my client wants her header to be navigation to left - logo in the middle - navigation to the right (see exact picture of what she wants) but I cannot seem to get it without CSS. Would anyone know where and what code I need to insert to get this result? Thank you in advance! Which version and template name is your site? With 7.1, you can config it directly on Header editor header_arrange sqs.mp4 If your site is built with the previous version and some specific templates, you need having some configuration to implement it. In this case, sharing your site with the protected password makes it easier to find the solution BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
mariagiuliacastellani Posted October 25, 2021 Author Share Posted October 25, 2021 Thank you so much for your help!! Ok so I managed to do it how you showed me, now the logo is in the middle. But the problem is that they still want some of the navigation links to the left and some to the right, while still including in small the shopping cart and the call to action button. Here is the website with protected password: https://indigo-flamingo-amw3.squarespace.com/ password: londoncryo I have created now all the navigation pages so for your understanding, they would like to have: On the left of the logo : About Services Prices Blog On the right of the logo: Memberships Products Corporate wellness Contact Plus on the right corner the shopping cart and call to action botton: Book Let me know if you can still help! thanks a lot Link to comment
tuanphan Posted October 27, 2021 Share Posted October 27, 2021 On 10/25/2021 at 4:51 PM, mariagiuliacastellani said: Thank you so much for your help!! Ok so I managed to do it how you showed me, now the logo is in the middle. But the problem is that they still want some of the navigation links to the left and some to the right, while still including in small the shopping cart and the call to action button. Here is the website with protected password: https://indigo-flamingo-amw3.squarespace.com/ password: londoncryo I have created now all the navigation pages so for your understanding, they would like to have: On the left of the logo : About Services Prices Blog On the right of the logo: Memberships Products Corporate wellness Contact Plus on the right corner the shopping cart and call to action botton: Book Let me know if you can still help! thanks a lot Add to Settings > Advanced > Code Injection > Footer <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile'); }) </script> <style> .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+4) {display: none;} .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+5) {display: none;} .header-nav-item:nth-child(n+5) { margin-right: 1.5vw; } </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
mariagiuliacastellani Posted October 29, 2021 Author Share Posted October 29, 2021 Quote On 10/27/2021 at 2:59 PM, tuanphan said: Add to Settings > Advanced > Code Injection > Footer <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile'); }) </script> <style> .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+4) {display: none;} .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+5) {display: none;} .header-nav-item:nth-child(n+5) { margin-right: 1.5vw; } </style> Thank you. This worked. But now on the phone it looks like this : (see picture). How can I remove that from the mobile view? And just leave the header as it is supposed to be set for mobile view: standard sandwich menu on the left - logo in the centre - shopping cart on the right? Link to comment
tuanphan Posted October 31, 2021 Share Posted October 31, 2021 On 10/29/2021 at 5:34 PM, mariagiuliacastellani said: adjusted the code & sent you 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment