sastavangogh

I ran into this frustrating roadblock today. As this post was one of the first search results I found I'm posting my solution here.
/*Portfolio Overlay Grid*/ .portfolio-text:hover { opacity: 1 !important; background-color: rgba(255, 255, 255, 0.7); } This has worked for me to get the hover overlay effect on mobile and tablets. The background overly is 70% white, you can edit as you like.
I've ended up setting this from desktop screen size down to make sure it also works on iPad Pro's (I don't have one to check).
I hope this is helpful for someone. 
Really disappointed that Squarespace doesn't have this sorted yet.

Hi. Add to Design > Custom CSS
/* link hover */ .header-nav-item a, .header-nav-item { text-decoration: none !important; background-image: none !important; position: relative; border: none !Important; } .header-nav-item a:after { content: ""; background: currentColor; height: 1px; width: 0; display: inline-block; position: absolute; bottom: 0; right: 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header-nav-item a:hover:after { width: 100%; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }  

@sastavangogh Add this new code
/* nav underline */ body.homepage .header-nav-item a:hover { border-bottom: 1px solid white; } body:not(.homepage) .header-nav-item a:hover { border-bottom: 1px solid black !important; }  

Hi i just your code in your code you added the ";" before the a remove it, it a bug due to that its not working.
otherwise use below code
.header-nav-folder-item a:hover {
  border-bottom:1px solid #fff !important;
}

Use
body:not(.header--menu-open) .black .header-nav-folder-content { background-color: transparent; }  

Site URL: https://www.aditya-sinha.com/
Hi!
I needed help changing the background colour for the dropdown menu on my homepage. Ideally if I could remove the colour and add a hover, that would be great! Please do suggest any Custom CSS I can add for it. 
If not that, then if there's a way to reduce the width of the dropdown menu to the text and add a transparent background instead.  @tuanphan if you could help, that would be wonderful. thanks!
Password for access: tester

Hi. Add to Design > Custom CSS
body.homepage article section:first-child:after { content: ""; position: absolute; left: 50%; bottom: 10px; display: block; text-align: center; font-size: 100px; z-index: 100; text-decoration: none; text-shadow: 0; width: 30px; height: 30px; border-bottom: 4px solid white; border-right: 4px solid white; z-index: 9; left: 50%; -webkit-transform: translate(-50%, 0%) rotate(45deg); -moz-transform: translate(-50%, 0%) rotate(45deg); transform: translate(-50%, 0%) rotate(45deg); -webkit-animation: fade_move_down 4s ease-in-out infinite; -moz-animation: fade_move_down 4s ease-in-out infinite; animation: fade_move_down 4s ease-in-out infinite; } /*animated scroll arrow animation*/ @-webkit-keyframes fade_move_down { 0% { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @-moz-keyframes fade_move_down { 0% { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @keyframes fade_move_down { 0% { transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { transform:translate(0,10px) rotate(45deg); opacity: 0; } }