Jump to content

Transparent Nav on Image Gallery

Recommended Posts

Site URL: https://tangerine-iguana-kwg3.squarespace.com/

Hello there, 

I was hoping to get some help in a couple of areas within the header:
- I have an image gallery on the homepage and for some reason the nav is no longer transparent above the gallery, but it is on my other pages. Is there a way to get the image gallery to be full bleed? It looks like the issue is the spacing as it is placed below the nav, unlike other full bleed content.

- Additionally, I was also trying to find a way to have an alternate header image show up on mobile vs. desktop as the gallery images gets cropped significantly. Unsure if there is a solve for this, but thought to ask regardless, thanks a lot! 

https://tangerine-iguana-kwg3.squarespace.com/

Password: MaintainS134!

Link to comment

Is this what you want, let's copy the custom css in place

image.thumb.png.4d83bdb4222299acffca32fa27520494.png

section[data-section-id="5faddfad2bb93a1ea28b510b"] {
  padding-top: 0 !important;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
19 minutes ago, Sera said:

Fantastic, thank you so much! This is exactly what I needed.

And as far as using an alternate image in Mobile view, is that possible at all? 

Thanks again,

Anna

 

the selectors for 1st 2nd 3rd is from top to bottom, kindly replace your own images

image.thumb.png.7e6b5d2769061f52b47aa1b6ebf4340e.png

section[data-section-id="5faddfad2bb93a1ea28b510b"] {
  padding-top: 0 !important;
}

@media only screen and (max-width: 768px) {
  section[data-section-id="5faddfad2bb93a1ea28b510b"] .gallery-fullscreen-slideshow-item-img img {
  display: none;
}
section[data-section-id="5faddfad2bb93a1ea28b510b"] .gallery-fullscreen-slideshow-list .gallery-fullscreen-slideshow-item:nth-child(1) .gallery-fullscreen-slideshow-item-img {
    background: url(https://placeimg.com/640/480/any) no-repeat;
    background-size: cover;
  }
section[data-section-id="5faddfad2bb93a1ea28b510b"] .gallery-fullscreen-slideshow-list .gallery-fullscreen-slideshow-item:nth-child(2) .gallery-fullscreen-slideshow-item-img {
    background: url(https://placeimg.com/640/480/any) no-repeat;
    background-size: cover;
  }
section[data-section-id="5faddfad2bb93a1ea28b510b"] .gallery-fullscreen-slideshow-list .gallery-fullscreen-slideshow-item:nth-child(3) .gallery-fullscreen-slideshow-item-img {
    background: url(https://placeimg.com/640/480/any) no-repeat;
    background-size: cover;
  }
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.