Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

tuanphan

Circle Member
  • Content Count

    6,927
  • Joined

  • Last visited

  • Days Won

    69

Everything posted by tuanphan

  1. @JohnWay you can edit if (window.pageYOffset > sticky) to, it can improve a bit if (window.pageYOffset > sticky+600)
  2. I think the problem is caused by the template. Perhaps a little modification to the banner
  3. @JohnWay then add this code to Home > Design > Custom CSS .sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: rgba(255,255,255,0.5); } and add the SCRIPT Code to Home > Settings > Advanced > Code Injection > Footer <script> window.onscroll = function() {myFunction()}; var header = document.getElementsByClassName("Header--top"); var header2 = header[0]; var sticky = header2.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { header2.classList.add("sticky"); } else { header2.classList.remove("sticky"); } } </script>
  4. @JohnWay Okay. Remove all code from here: and here then add this to Home > Design > Custom CSS .sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: rgba(255,255,255,0.5); } and add to Home > Settings > Advanced > Code Injection > Footer <script> window.onscroll = function() {myFunction()}; var header = document.getElementsByClassName("Header--top"); var header2 = header[0]; var sticky = header2.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { header2.classList.add("sticky"); } else { header2.classList.remove("sticky"); } } </script>
  5. @JohnWay I mean you want to do (1) (like video) or (2)
  6. @JohnWay You mean? 1. When scrolling, it will be transparent, and when scrolling over it will return to normal The above two code snippets did that. 2. Or When scrolling, it becomes transparent, and so on
  7. Perhaps you mistakenly deleted some code Still not work with CSS & Script? @JohnWay
  8. @JohnWay First, add to Home > Design > Custom CSS header.Header.Header--top { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } .sticky { background: rgba(255,255,255,0.5); transition: all 0.75s; } Next, add to Home > Settings > Advanced > Code Injection > Footer <script> window.onscroll = function() {myFunction()}; var header = document.getElementsByClassName("Header--top"); var header2 = header[0] var sticky = header2.offsetTop; function myFunction() { if (window.pageYOffset > sticky & window.pageYOffset < sticky + 300) { header2.classList.add("sticky"); } else { header2.classList.remove("sticky"); } } </script>
  9. @Flock Add to Home > Design > Custom CSS nav#main-navigation li a { border: 2px solid #fff; padding: 3px; }
  10. @JohnWay Try header.Header.Header--top { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: rgba(255,255,255,0.5); }
  11. @JohnWay header.Header.Header--top { position: fixed; top: 0; left: 0; right: 0; z-index: 999; }
  12. @Jomac add !important to after eg: font-family: 'fav' !important;
  13. @JohnWay You're welcome. Please like if the answer is correct. I don't work for Squarespace. Just help community 😉 I'm freelancer, if you need more help with websites, you can consider my service (in signature)
  14. @JohnWay .Header-nav--secondary *:hover { color: red !important; } .Header-nav--secondary .Header-nav-item--active { color: blue !important; }
  15. @JohnWay Each template will have different code. Can your share your site url?
  16. @Mcddt It will take some time. I will send it tonight, if you still cannot find another solution. (now 8:30 am, working)
  17. you can use color name (color: red;) or color code (color: #ff0000;) or rgb (rgb(0,0,0) or rgba, or hsl.. @JohnWay
  18. @Mcddt Add to Home > Design > Custom CSS .ProductItem-details .product-variants { display: none !important; } .product-quantity-input { display: none !important; } With Shopify button, I think we can use custom code to hide all (title, price, variant,...), you can type manually title, price...above Shopifty button. Then move shopify button, additional description to right of image
  19. @nancyk @media screen and (max-width:640px) { .ProductItem-gallery { max-width: 50%; margin: 0 auto; } }
  20. Did you solve? your site different screenshot. @kiellsworth
  21. @Mcddt I think some custom code can hide Variant (i'm not sure) & Quantity. Can you share product page url to check?
  22. @nicolejacksonmiller Can you share contact page url? I think some custom code can handle.
  23. @hsoweid Add to Home > Design > Custom CSS .homepage .layout-caption-below .image-caption p { font-size: 20px; } .homepage .layout-caption-below .image-caption { background: #f1f2f3; }
  24. @JohnWay Add to Home > Design > Custom CSS. Do similar with other icons .fa-youtube:hover { color: red; } If it doesn't work, please share site url to check code.
×
×
  • Create New...