Darya Posted June 29, 2022 Posted June 29, 2022 (edited) Site URL: https://demo.flothemes.com/velvet-template/ Hello, I would like to create a split navigation of 6 items (3 on each side) which is responsive and the navigation items are related to the logo. Example of responsiveness of the split navigation around logo is this: https://demo.flothemes.com/velvet-template/ Is it possible to create something from this code (see below) but with the smooth responsiveness of the example above? (Code source: https://stnsvn.com/blog/how-to-make-a-split-navigation-in-squarespace-71) .header-nav { position: absolute; top: 5px; bottom: 0; margin-top: 0!important; margin-left: -50px!important; } .header-nav-item:nth-of-type(3) { margin-right: 340px!important; } .header-title-logo a { z-index: 1000; position: relative; } Thank you! Edited June 29, 2022 by Darya
tuanphan Posted June 29, 2022 Posted June 29, 2022 Possible. What is your site url? Do you use Personal or Business Plan? Each plan will have a different code. 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!)
Darya Posted July 13, 2022 Author Posted July 13, 2022 Hello, Here is the access to the website, it's on a business plan: d-a-pro.squarespace.com pw: papaya-triangle Thank you in advance!
tuanphan Posted July 13, 2022 Posted July 13, 2022 6 hours ago, Darya said: Hello, Here is the access to the website, it's on a business plan: d-a-pro.squarespace.com pw: papaya-triangle Thank you in advance! Can you remove code you used to add split nav? We can test new code easier 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!)
Darya Posted July 13, 2022 Author Posted July 13, 2022 Yes, I've removed the nav code. FYI I'm also styling the drop-down menus with the following code, ok to keep for now? // HOVER STATE NAV LINE .header-nav-item { position: relative; } body:not(.header--menu-open) .header-nav-folder-content { background-color: white; } .header-nav-item::before { content: ""; position: absolute; display: block; width: 100%; height: 1.5px; bottom: -8px; background-color: #000; transform: scaleX(0); transition: transform 0.4s ease; } .header-nav-item:not(.header-nav-item--active):hover::before { transform: scaleX(1); } .header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover a { color: #000 !important; opacity: 0.8; } // MENU INVERT .homepage .header-nav-item { filter: invert(1); -webkit-filter: invert(1); } .homepage .header-title-logo img { filter: invert(1); -webkit-filter: invert(1); } // TRANSPARENT DROPDOWN .header-nav-folder-content { background-color: transparent !important; }
tuanphan Posted July 14, 2022 Posted July 14, 2022 Hi, Can you change layout to Left Nav - Middle Logo? Then add this 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+3) {display: none;} .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;} .header-nav-item:nth-child(n+4) { margin-right: 1.5vw; } </style> Darya 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!)
Darya Posted July 14, 2022 Author Posted July 14, 2022 Hi, It's partially there - the items in the drop-down menu are showing up all together with the top folder item. Thank you for your help.
Darya Posted July 15, 2022 Author Posted July 15, 2022 (edited) Tuan, I would like to bring the on-hover line animation into the dropdown menu items and for the "active" top menu items to match. Is this possible? Homepage: Our Story: Edited July 15, 2022 by Darya
tuanphan Posted July 15, 2022 Posted July 15, 2022 To fix dropdown, add this code <style> /* Fix dropdown */ .header-actions--right .header-nav-folder-content { opacity: 0; pointer-events: none; position: absolute; top: auto; left: auto; padding: .5em 1em; text-align: left; width: 200px; z-index: 10; margin-left: -1em; } .header-actions--right a.header-nav-folder-title { text-decoration: none; backface-visibility: hidden; padding: .1em 0; } .header-actions--right .header-nav-item--folder:hover .header-nav-folder-content { opacity: 1; pointer-events: auto; } </style> You mean when user on Our Store >> Make it underline? Darya 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!)
Darya Posted July 15, 2022 Author Posted July 15, 2022 Is there a way to make the navigation menu items scale in size (font gets smaller) when in tablet mode? The idea is to have the font get slightly smaller to prevent breaking into two lines when on tablet right before mobile.
tuanphan Posted July 18, 2022 Posted July 18, 2022 On 7/16/2022 at 12:50 AM, Darya said: Is there a way to make the navigation menu items scale in size (font gets smaller) when in tablet mode? The idea is to have the font get slightly smaller to prevent breaking into two lines when on tablet right before mobile. You mean Ipad Pro Landscape mode? On most tablets, the header will change to the burger menu Darya 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!)
Daxamillion Posted November 1, 2022 Posted November 1, 2022 On 7/18/2022 at 4:25 AM, tuanphan said: You mean Ipad Pro Landscape mode? On most tablets, the header will change to the burger menu I would like to do the same thing. I would like to see if there is a way for the navigation menu to scale based on the size of a browser. Like this site: https://www.legendsmarketing.com Right now once the page is reduced stacks the menu on two lines. Is there a solution to scale the fonts?
tuanphan Posted November 4, 2022 Posted November 4, 2022 On 11/2/2022 at 5:42 AM, Daxamillion said: I would like to do the same thing. I would like to see if there is a way for the navigation menu to scale based on the size of a browser. Like this site: https://www.legendsmarketing.com Right now once the page is reduced stacks the menu on two lines. Is there a solution to scale the fonts? What is your site url? 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!)
pexeldio Posted January 26, 2023 Posted January 26, 2023 On 7/14/2022 at 3:29 PM, tuanphan said: Hi, Can you change layout to Left Nav - Middle Logo? Then add this 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+3) {display: none;} .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;} .header-nav-item:nth-child(n+4) { margin-right: 1.5vw; } </style> Code work on desktop, but on mobile, its look wired.
tuanphan Posted January 27, 2023 Posted January 27, 2023 On 1/26/2023 at 7:39 AM, pexeldio said: Code work on desktop, but on mobile, its look wired. That code runs on desktop only. You try checking it again on real mobile. If it still appear weird, can you share link to your site? We can check easier 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!)
pexeldio Posted January 27, 2023 Posted January 27, 2023 I have another issue, I used your code to add a add to cart button on summery block, is it possible to when click on add to cart it will no take user to different page, Just product should be added on the cart?
tuanphan Posted January 28, 2023 Posted January 28, 2023 19 hours ago, pexeldio said: I have another issue, I used your code to add a add to cart button on summery block, is it possible to when click on add to cart it will no take user to different page, Just product should be added on the cart? Hi, I don't know this. You can consider using Product Blocks instead 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!)
azubair653 Posted July 30, 2023 Posted July 30, 2023 On 1/28/2023 at 2:10 PM, tuanphan said: Hi, I don't know this. You can consider using Product Blocks instead On 7/14/2022 at 2:29 PM, tuanphan said: Hi, Can you change layout to Left Nav - Middle Logo? Then add this 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+3) {display: none;} .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;} .header-nav-item:nth-child(n+4) { margin-right: 1.5vw; } </style> Can you help me? I need search bar on the left https://local-narcissist.squarespace.com/
tuanphan Posted August 1, 2023 Posted August 1, 2023 On 7/31/2023 at 12:20 AM, azubair653 said: Can you help me? I need search bar on the left https://local-narcissist.squarespace.com/ Move this? 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!)
azubair653 Posted August 2, 2023 Posted August 2, 2023 19 hours ago, tuanphan said: Move this? Can we achieve this? @tuanphan
cdeasy Posted August 2, 2023 Posted August 2, 2023 Hello I have a question on the above topic of split navigation. I put this code injection into the footer: I changed layout to left nav, middle logo then added this. <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+3) {display: none;} .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;} .header-nav-item:nth-child(n+4) { margin-right: 1.5vw; } </style> It works well except I have 8 pages and I would like 5 to the left and 3 on the right... when I try to change numbers in the code they disappear. My website is https://www.jennifercawley.co.uk Thank you Claire
tuanphan Posted August 3, 2023 Posted August 3, 2023 On 8/1/2023 at 3:40 PM, tuanphan said: Move this? Which code did you use to add Search bar on right of logo? I guess we will need to tweak that code 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!)
tuanphan Posted August 3, 2023 Posted August 3, 2023 On 8/2/2023 at 4:20 PM, cdeasy said: Hello I have a question on the above topic of split navigation. I put this code injection into the footer: I changed layout to left nav, middle logo then added this. <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+3) {display: none;} .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {display: none;} .header-nav-item:nth-child(n+4) { margin-right: 1.5vw; } </style> It works well except I have 8 pages and I would like 5 to the left and 3 on the right... when I try to change numbers in the code they disappear. My website is https://www.jennifercawley.co.uk Thank you Claire Use this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.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+5) {display: none;} .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+6) {display: none;} .header-nav-item:nth-child(n+4) { 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment