Darya Posted June 29, 2022 Share 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 Link to comment
tuanphan Posted June 29, 2022 Share 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 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
Darya Posted July 13, 2022 Author Share 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! Link to comment
tuanphan Posted July 13, 2022 Share 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 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
Darya Posted July 13, 2022 Author Share 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; } Link to comment
tuanphan Posted July 14, 2022 Share 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 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
Darya Posted July 14, 2022 Author Share 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. Link to comment
Darya Posted July 15, 2022 Author Share 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 Link to comment
tuanphan Posted July 15, 2022 Share 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 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
Darya Posted July 15, 2022 Author Share 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. Link to comment
tuanphan Posted July 18, 2022 Share 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 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
Daxamillion Posted November 1, 2022 Share 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? Link to comment
tuanphan Posted November 4, 2022 Share 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 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
pexeldio Posted January 26 Share Posted January 26 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. Link to comment
tuanphan Posted January 27 Share Posted January 27 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 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
pexeldio Posted January 27 Share Posted January 27 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? Link to comment
tuanphan Posted January 28 Share Posted January 28 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 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
azubair653 Posted July 30 Share Posted July 30 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/ Link to comment
tuanphan Posted August 1 Share Posted August 1 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 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
azubair653 Posted August 2 Share Posted August 2 17 hours ago, tuanphan said: Move this? yes Link to comment
azubair653 Posted August 2 Share Posted August 2 19 hours ago, tuanphan said: Move this? Can we achieve this? @tuanphan Link to comment
cdeasy Posted August 2 Share Posted August 2 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 Link to comment
tuanphan Posted August 3 Share Posted August 3 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 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
tuanphan Posted August 3 Share Posted August 3 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 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