mtaddict Posted April 23, 2020 Share Posted April 23, 2020 (edited) Site URL: https://bisourouen.squarespace.com/ Website Password: lachose hey there, I would like to know how to add a sticky menu to the Basil template with CSS/PHP Could you help me? Edited April 23, 2020 by mtaddict double entry Link to comment
tuanphan Posted April 23, 2020 Share Posted April 23, 2020 Add to Home > Design > Custom CSS header.Header.Header--bottom.Header--overlay { position: -webkit-sticky; position: sticky; } 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
mtaddict Posted April 23, 2020 Author Share Posted April 23, 2020 Thank you, it works, but how could it be possible to make the sticky menu with a white background, black font and little bit smaller than the "normal" menu? Link to comment
tuanphan Posted April 23, 2020 Share Posted April 23, 2020 2 minutes ago, mtaddict said: Thank you, it works, but how could it be possible to make the sticky menu with a white background, black font and little bit smaller than the "normal" menu? It needs JavaScript. Which plan do you use? Personal or Ecommerce? 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
mtaddict Posted April 23, 2020 Author Share Posted April 23, 2020 5 minutes ago, tuanphan said: It needs JavaScript. Which plan do you use? Personal or Ecommerce? Business Link to comment
tuanphan Posted April 25, 2020 Share Posted April 25, 2020 Add to Home > Settings > Advanced > Code Injection > Footer <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(function(){ var visibleTop = 10; $(window).scroll(function() { var scroll = getCurrentScroll(); if ( scroll >= visibleTop ) { $('header.Header').addClass('tuan'); } else { $('header.Header').removeClass('tuan'); } }); function getCurrentScroll() { return window.pageYOffset || document.documentElement.scrollTop; } }); </script> next, add this to Home > Design > custom CSS /* set background */ .tuan { background: white !important; } /* set font color */ .tuan * { color: black !important; } 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
mtaddict Posted April 28, 2020 Author Share Posted April 28, 2020 On 4/25/2020 at 10:17 AM, tuanphan said: Add to Home > Settings > Advanced > Code Injection > Footer <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(function(){ var visibleTop = 10; $(window).scroll(function() { var scroll = getCurrentScroll(); if ( scroll >= visibleTop ) { $('header.Header').addClass('tuan'); } else { $('header.Header').removeClass('tuan'); } }); function getCurrentScroll() { return window.pageYOffset || document.documentElement.scrollTop; } }); </script> next, add this to Home > Design > custom CSS /* set background */ .tuan { background: white !important; } /* set font color */ .tuan * { color: black !important; } That doesn't work properly, please check the website: https://bisourouen.squarespace.com/ Website Password: lachose Link to comment
tuanphan Posted May 2, 2020 Share Posted May 2, 2020 On 4/30/2020 at 10:50 PM, mtaddict said: up please Seems fine here. Did you solve? 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
mtaddict Posted May 2, 2020 Author Share Posted May 2, 2020 5 hours ago, tuanphan said: Seems fine here. Did you solve? Not at all... You don't see it doesn't work? 😕 Link to comment
tuanphan Posted May 5, 2020 Share Posted May 5, 2020 On 5/3/2020 at 2:20 AM, mtaddict said: Not at all... You don't see it doesn't work? 😕 Add to Code Injection Header <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(function(){ var visibleTop = 10; $(window).scroll(function() { var scroll = getCurrentScroll(); if ( scroll >= visibleTop ) { $('header.Header').addClass('tuan'); } else { $('header.Header').removeClass('tuan'); } }); function getCurrentScroll() { return window.pageYOffset || document.documentElement.scrollTop; } }); </script> <style> .tuan { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } </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
mtaddict Posted May 7, 2020 Author Share Posted May 7, 2020 On 5/5/2020 at 2:11 PM, tuanphan said: Add to Code Injection Header <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(function(){ var visibleTop = 10; $(window).scroll(function() { var scroll = getCurrentScroll(); if ( scroll >= visibleTop ) { $('header.Header').addClass('tuan'); } else { $('header.Header').removeClass('tuan'); } }); function getCurrentScroll() { return window.pageYOffset || document.documentElement.scrollTop; } }); </script> <style> .tuan { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } </style> Hello, I putted this in the header injection code section, and my custom css is header.Header.Header--bottom.Header--overlay { position: -webkit-sticky; position: sticky; } /* set background */ .tuan { background: white !important; } /* set font color */ .tuan * { color: black !important; } but as you can see, that doesn't work properly... a lot of bugs... Site URL: https://bisourouen.squarespace.com/ Website Password: lachose Link to comment
mitosan Posted January 25, 2021 Share Posted January 25, 2021 Would you mind posting your solution? From checking out the site, it looks like it's working well. Link to comment
tuanphan Posted January 26, 2021 Share Posted January 26, 2021 2 hours ago, mitosan said: Would you mind posting your solution? From checking out the site, it looks like it's working well. Can you share site url? We can help 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
mitosan Posted January 26, 2021 Share Posted January 26, 2021 Quote Can you share site url? We can help easier https://bisourouen.squarespace.com/ was the original site I believe. I'm just wondering what their solution was to the sticky header issue was, because it looks like it is working correctly on their site. Link to comment
tuanphan Posted February 2, 2021 Share Posted February 2, 2021 On 1/26/2021 at 11:22 AM, mitosan said: https://bisourouen.squarespace.com/ was the original site I believe. I'm just wondering what their solution was to the sticky header issue was, because it looks like it is working correctly on their site. It looks like you solved? 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
crownvideos Posted April 21, 2021 Share Posted April 21, 2021 (edited) Hello, Is there any way to do the sticky header go from transparent at the top to black with white writing when scrolling down please? Thanks! www.crownvideos.co.uk Edited April 21, 2021 by crownvideos Link to comment
tuanphan Posted April 25, 2021 Share Posted April 25, 2021 On 4/21/2021 at 11:59 PM, crownvideos said: Solved! Do you want to fix these? Site URL – https://www.crownvideos.co.uk/ 1. (Tablet-Footer) Want to change to 2 columns/row on tablet? 2. (Mobile-Footer) Reduce space between E11 – Social icons? 3. (Tablet-Header) Nav has 4 items only. Want to force desktop nav on tablet? 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
j_appleseed Posted June 16, 2021 Share Posted June 16, 2021 On 4/23/2020 at 6:04 AM, mtaddict said: Site URL: https://bisourouen.squarespace.com/ Website Password: lachose hey there, I would like to know how to add a sticky menu to the Basil template with CSS/PHP Could you help me? Hi mtaddict, can you share how you solved your initial question in this post? I have the same problem I'd like to solve. Many thanks! Philip Link to comment
tuanphan Posted June 16, 2021 Share Posted June 16, 2021 9 hours ago, j_appleseed said: Hi mtaddict, can you share how you solved your initial question in this post? I have the same problem I'd like to solve. Many thanks! Philip Can you share your site url? We can take a look 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