alexanderfantini

Hey there, no unfortunately I still haven't found a solution as I think it requires a custom js script to tweak the scroll behaviour 😞

Thank you very much! This fixes the scroll up issue but now the header does not reappear once I reach the bottom of the page! The idea is that I treat the top of the page as a start of the UX and when the users scrolls to the very bottom, the footer and header comes back in same as the main navigation page. See www.alexanderfantini.com/creative and www.alexanderfantini.com/intro Without your code the header appears once the viewer reaches the end of page and I'd love to retain that feature! Is it possible? Many thanks in advance!

Hello there!! Thank you very much for getting back to me! I can't seem to be able to see that floating window (as I believe I'm currently using Squarespace 7.00) I can see header options in the Site Style page but nothing about fixed position!

Thank you very very much @tuanphan! I really appreciated your support here!! In the end, the hovering highlight was still taking place if I hovered the other icons too - whereas the current style dropped the opacity of the social icons that were not directly selected! The code I came up with to fix this overall is this: <style> /* TikTok Logo */ [href *='tiktok'] { content: ''; display: inline-block; width: 100%; height: 100%; background-image: url('https://api.iconify.design/ic/outline-tiktok.svg?color=black'); background-repeat: no-repeat; background-position: center center; background-color: white; } /* Hide URL logo */ [href *='tiktok'] svg, [href *='tiktok'] svg { visibility: hidden; } /* Opacity transition not directly hovered */ [data-slice-type="social-icons"]:hover [href *='tiktok']:not(:hover){ opacity: 50%; transition-property: opacity; transition-duration: 170ms; transition-timing-function: ease-in-out; transition-delay: 0s; } </style> I couldn't have done it without your help though!! Many many thanks!

You're an absolute wizard!!! It's almost fully working! I managed to strip it down (with the base look and without doubling up the logo on hover) by using: /* TikTok Logo */ [href *='tiktok'] { content: ''; display: inline-block; width: 100%; height: 100%; background-image: url('https://api.iconify.design/ic/outline-tiktok.svg?color=black'); background-repeat: no-repeat; background-position: center center; background-color: white; } [href *='tiktok'] svg, [href *='tiktok'] svg { visibility: hidden; } As it stands though, if I hover the cursor over any other icon, it still keeps the TT icon highlighted. (Essentially in the cover page the social links that are not selected drop in opacity, vs the rest of the website where the hovered one is highlighted!) I'd imagine there is a different approach than using this perhaps? [href *='tiktok']:hover:after { xxxxxx <--- the other icons should dim } It would be great to solve this, but incredibly happy with this for the time being!!! Thank you a milli @tuanphan!!!

Site URL: https://alexanderfantini.com/intro Hello!! I'm currently trying to have the header be visibile only when at the top and at the bottom of the page. I'd like to hide the header whenever I scroll up (currently hiding when scrolling down). To fix the header in place I used this in the Custom CSS page: .site-header{ position: fixed; } Website: https://alexanderfantini.com/intro pw: testing Anybody able to help me with this? Many many thanks in advance!!

Site URL: https://alexanderfantini.com/ Hello there! I'm currently trying to change the TikTok icon in the Social Links - would love to retain animation and hover state (mask). https://alexanderfantini.com/ I can't seem to be able to target the social-url with ref tiktok. Would love to include the snippet in the Advanced > Page Header Injection of the page! Many thanks in advance! P.s. in the rest of the website I'm running this code and would love to have the same icon and size. /* TikTok Logo Social */ .header-actions-action--social [href *='tiktok']:after, .sqs-svg-icon--list [href *='tiktok']:after { content: ''; display: inline-block; width: 100%; height: 100%; background-image: url('https://api.iconify.design/ic/outline-tiktok.svg?color=black'); background-repeat: no-repeat; background-position: center center; } .header-actions-action--social [href *='tiktok']:hover:after, .sqs-svg-icon--list [href *='tiktok']:hover:after { content: ''; display: inline-block; width: 100%; height: 100%; background-image: url('https://api.iconify.design/bxl/tiktok.svg?color=white'); background-repeate: no-repeat; background-position: center center; } .header-actions-action--social [href *='tiktok'], .sqs-svg-icon--list [href *='tiktok'] { position: relative; } .header-actions-action--social [href *='tiktok'] svg, .sqs-svg-icon--list [href *='tiktok'] svg { visibility: hidden; }