RyanDejaegher

@lieslmaduro do you have a link to the site? I can help you out

Hey @songofeireann I can see the restaurant menu block. The items are clickable, can you explain more of what you're trying to do?

/* Add this code to Design -> Custom CSS */


.index-section {
    scroll-snap-align: start;
}

.index-list {
    overflow-y: scroll !important;
    height:100vh;
    scroll-snap-type: y mandatory !important;
}

Result:

 

@justin_phang you can do this with CSS now, it use to require JavaScript but there's a new feature in CSS that makes this easier to implement

@katiapase It'll depend on what blocks you use on the page, especially if you're wanting to have the borders be consistent across all the blocks on the page. 

I would put all the elements that you're going to use on the page first and then revisit

@katiapase yes I figured, that would require quite a few overrides to achieve the same effect. Because you have to account for the borders on multiple columns/elements and also the spacing to ensure that any existing text/elements aren't bumping up against the border. 

@Frames_by_Saurabh

It looks like Squarespace does some lazy loading on the images that aren't visible yet, so as you scroll and as these images are loaded the layout of the page is "repainted". Repainting can cause a bit of performance lag especially when a lot of elements are being repainted. 

You could experiment with removing the code altogether and see if you run into the same issue. 

@RyanFontana

your code is close just needs a slight adjustment
 

#cart {
background-color: white;
a, h1, h2, h3, p {
color: black;
}
}

Result:

@ipratt, you'll need to share the site password to help troubleshoot

@Frames_by_Saurabh

/* Add this code to Design -> Custom CSS */

.gallery-masonry-wrapper {
    height: unset !important;
}

This should fix it 

@RedTrillium, @crockey, if you have links to your sites I can give you hand. Worked on a similar solution below
 

@Pandagal Is this the effect you're after? If so this could should get you started

 

/* Add this code to Design -> Custom CSS */

.gallery-caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    text-align:center;
    opacity: 0;
    transition: all .3s ease;
    background-color: white;
    height: 100%;
}

.gallery-masonry-item:hover .gallery-caption {
    opacity: 1;
    transition: all .3s ease;
}

.gallery-caption-wrapper {
    display: flex;
    place-items: center;
    justify-content: center;
}

@galangster, would something like this work? This is being done with the Summary List and could be used below the main header

WIP on a CSS only solution to a Full bleed slideshow. Will share solution when it's ready 🙂

@Frames_by_Saurabh This code will give you a single column on tablet and down.

Result:

@media(max-width:767px) {
.gallery-masonry-item {
    width: 100% !important;
    transform: unset !important;
    position: unset !important;
}

.gallery-masonry-item-wrapper {
    height: unset !important;
}

}

@Falconer, was there no option to show the title only on hover?

@katiapase, is this the effect you're going for?

 

Hey @Falconer do you have your gallery set to display a caption?

@Ben_Keeley

Yep you can use this code
 

.header-nav-folder-content {
    background: rgba(0,0,0,.5) !important;
}

@Ben_Keeley 

You can use this code. You can change the last value (0.5) between 0 - 1, to adjust how transparent the color is. BTW is this your company? If so super cool 🙂

/* Add this code to Design -> Custom CSS */

#header {
background: rgba(0,0,0,0.5);
}

@bangank36 my bad 🙂

Solution that doesn't require jQuery
 

<script>
// Add this code to Settings -> Advanced -> Code Injection -> Footer
(function(){

function shuffleChildren(parentSelector) {
    var parent = document.querySelector(parentSelector);
    
    parent.children.forEach((item,index) => {
        parent.appendChild(parent.children[Math.random() *index | 0])
    })   

})();

  // Example
shuffleChildren('.index-list');
}
</script>  

Demo
 

@JButler yes you can customize the style for category links, you'll need to copy the link/url and copy it to the code below. You can do this with blog categories or shop categories. 

/* Add this code to Design -> Custom CSS */

a[href="/shop?category=tumblers"] {
  color: red;
}

a[href="/shop?category=straws"] {
  color: blue;
}

Here's an example from another site with this code in place

@snorkelcookislands

// Add this code to Settings -> Advanced -> Code Injection -> Footer
<script>
  (function(){
window.addEventListener('load', function(){
	  var tours = document.querySelector('[href="/tours"]');
  		tours.addEventListener('click', function() {
	window.location = tours.href
})
})
})();


  </script>

Hey @PhilipStewart you'll need to set a sitewide password before anyone can look

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords