ethos-brand-studio

Has anyone ever tried to display blog posts in a lightbox when clicked on from a summary block?

My client wants a timeline with clickable pop-ups that share the backstory of each moment. I was hoping to use the blog feature to categorize and organize the posts. I've considered using the Lightbox Anything plugin from SQSP Themes, but wanted to check the forum before I go that route. I'd rather not create individual pages with individual links for each moment.

Any ideas?

Hey @tuanphan I am having a similar challenge wherein my client wants scrolling to be disabled while the homepage loading screen is displayed (for 4 seconds). Do you have a script code that will disable scrolling temporarily?

site: https://iced-media-redesign.squarespace.com/

password: icedmedia

*facepalm* of course! Wow, thanks so much, @creedon, you are a lifesaver. Apologies for missing your earlier note, but I can't thank you enough for your help!

@creedon Thanks for looking into it! I appreciate it. 

Whew, thanks so much, @creedon. That does work, however I'm still having the same issue of the button not working on the homepage or the 'what we do' page, and only working on the other subpages. Is there some conflict I should be looking for?

@tuanphan @WHOisDANE Were you ever able to find a solution? I was trying to achieve the same thing, to add a Calendly popup to my header actions button. 

I attempted a workaround by absolutely positioning a code block that I added to the footer in the top right of my screen (so it looks like the header button, but it's actually not). However, the button is not working on the homepage or the "what we do page" - but it is working on all other subpages. Sometimes clicking on the button prevents scrolling on the page altogether, so I have to find another way.

Has anyone found a way to use the standard header button but call a Calendly popup?

For reference, my site is: https://iced-media-redesign.squarespace.com/ (password: icedmedia)

Thanks everyone for sharing their work, here. I am *so* close, but upon hover the image is larger than the main logo and I'm not sure how to ensure it stays the same size. The image file sizes are the same. Any help?

https://www.cjkeysphotos.com/home (no password)

Here is what I'm using for code:

//header logo
a.Header-branding:hover img {
    visibility: hidden;
}
a.Header-branding:hover {
    background-image: url(https://static1.squarespace.com/static/5f6bbe45973fd1123de3dc09/t/5f9330ad49180a7c6ff74181/1603481774001/CJKeys-Photos-Logo-hibiscus-2.png);
    background-size: cover;
    background-repeat:no-repeat;
}