Jump to content

sastavangogh

Member
  • Posts

    41
  • Joined

  • Last visited

Everything posted by sastavangogh

  1. Hi @tuanphan! I am trying to achieve a similar effect with a separate social link block, I have a personal plan as well so I tried this code but I need to use it for my Behance and Vimeo accounts - how can I include the social icons for these two platforms?
  2. Amazing, thank you that really worked!! Is there any way I can remove the word "Top" and just have it just be the arrow for the scroll up?
  3. Hi @tuanphan! The centre-alignment helped, but now there is a lot of empty space under the footer that I cannot seem to get rid of. I had changed the position property of the text to relative to get the placement correct, perhaps that has created an issue? Sharing code below: <a href="#top" class="t-top"><span class="arrow"></span>Top</a> <style> .t-top { font-weight: 300; letter-spacing: 3px; font-size: 14px; text-transform: none; text-align: center; line-height: 1.6; padding-left: 4px; padding-top: 4px; position: relative; bottom: 10px; height: 10px; z-index: 999; background-color: transparent; color: #000; } .t-top .arrow:before { font-family: 'squarespace-ui-font'; font-style: normal; font-weight: 300; font-size: 20px; line-height: 1; -webkit-font-smoothing: antialiased; content: "\e02d"; text-align: center; display: block; vertical-align: middle; transform: rotate(-90deg); cursor: pointer; margin-left: -4px; } .t-top .arrow {display:inline; } </style> In order to fix this, I am looking to reduce the footer height by half at least (without moving the centre aligned position of the 'back to top' button) I dont mind removing the text altogether and only keeping the arrow scrolling back to the top of the page, would that help the situation? Please help me figure this out, I have tried all possible codes I've found across on similar threads but none seem to help 😕 PW tester
  4. Could you help me fix this glitch please @tuanphan? Thanks so much
  5. Thanks for the code! I followed all the steps you mentioned above. However, the black background applies to the full body of text too, thus making it invisible. It only needs to apply to just the anchor link text, how can I fix that please? Screenshot attached.
  6. Hi this works for the LTR transition when I change the background to black! But the text colour wont change to white even when I add "color: #ffffff!important;"? How can I bring the text on top of the black background in the colour white (on hover)?
  7. Yeah sure! Its on the homepage, right under the opening slideshow - I want to add a couple more anchor links in this section once the LTR transition works. Screenshot attached for reference. PW tester
  8. Hi I am still looking for an answer to this, if anyone could help me out with the CSS for this that would be really great. Thanks!
  9. Hi! Could you please share how you fixed the anchor links on mobile view? I have the exact same issue with my homepage anchor links!
  10. @bangank36, hi - wanted to check with you if you could help me out with this? Any help would be appreciated, thanks!
  11. Hi, I tried a similar code and it works! But the problem is that the footer's overall height increases a lot when I put this code. Any chance I can avoid/fix the height of the footer to normal?
  12. Hi @tuanphanit is a little to the right if you look closely, any way to center it to the screen properly? I've attached a screenshot for better clarity.
  13. Hi @tuanphan, thanks for helping me out with the scroll down indicator a couple months ago (and since!). But I've just come to realise that the arrow is not center aligned on mobile. I've tried numerous codes from similarly answered questions on the forum, but none have seemed to work. Would you know how to center align the indicator on mobile devices as well? Thanks. PW tester
  14. Hey, a follow up question: I am trying to apply a similar hover animation to anchor links on the homepage, where in when you hover on the links, the background color changes as a transition from left to right. *Currently the links have been customised to have a ##f6ffed background and no underline; on hover, the links' font color changes to white, background colour to black. How can I add the above mentioned LTR transition to the links? *Code for the above: h2 a { text-decoration: none!important; background: #f6ffed; padding-left: 3px; padding-right: 3px; padding-bottom:1px; } h2 a:hover{ background: #000000!important; color: #ffffff!important; padding-left: 3px; padding-right: 3px; padding-bottom:1px; }
  15. Thank you once again Tuanphan, your help is very much appreciated!
  16. Hi @bangank36, could you help me centre-align the 'Back to Top' arrow in a way that the footer height does not increase beyond the default? Thank you
  17. @bangank36 Hi! Any chance you could help out with this please? Would it be possible to do so via CSS and code (not code injection)?
  18. Site URL: https://www.aditya-sinha.com/ Hi @tuanphan, I followed your link (https://beaverhero.com/back-to-top-squarespace/) to create a back to top arrow on my page. However, it does not seem to centre align properly. I've added <center></center> to the code as well and here is the customized CSS I put into the Design tab: /* Back to Top */ .t-top { font-weight: 300; letter-spacing: 3px; font-size: 14px; text-transform: none; text-align: center; line-height: 1.6; padding-left: 4px; padding-top: 4px; position: fixed; bottom: -10px; width: 100px; height: 40px; z-index: 999; background-color: transparent; color: #000; } .t-top .arrow:before { font-family: 'squarespace-ui-font'; font-style: normal; font-weight: 300; font-size: 20px; line-height: 1; -webkit-font-smoothing: antialiased; content: "\e02d"; text-align: center; display: block; vertical-align: middle; transform: rotate(-90deg); cursor: pointer; margin-left: -4px; } .t-top .arrow {display:inline; } Every time i change the position to static, the height of the footer increases. Could you help make the back to top button center aligned and not affect the height of the footer? Thanks!
  19. Site URL: https://www.aditya-sinha.com/ Hi, I am looking to make the text on a blog page sticky, in order for it to stay on top of the page and serve as a sub-navigation for the blog posts below. I'm trying to achieve a similar Work page as is here: http://www.lauramccluskey.com/, with the categories/tags at the bottom of the page. Is there any method through Custom CSS and not Code Injection to possible achieve this? Password: tester
  20. Thanks! However, I meant a transition delay in terms of animation of the bottom border (left to right). Sorry it if wasn't clearer in the previous response! Any way to do that?
  21. Thans once again, @tuanphan! This has solved my issue 🙂 I was wondering how to edit this code to include a transition delay in the hover as well. Would that be possible?
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.