KMills

I am having a similar problem if anyone is able to help.

Darn. Sorry for talking to myself here...ha. Still having an issue with the logo going off center when I adjust the page size. Maybe I need to set the logo to shrink with the page? It doesn't appear on mobile so it would likely just be an issue for partial screen and ipad. Also noticing that I can see part of the logo when my screen isn't at full height. If you look closely at "Homepage" in the second photo, you can see part of the Sharp Leadenhall logo.

I *think* i fixed it by adding this: .header-title { position: absolute; left: 50%; top: 50%; transform: translate(-48%, 10%); z-index: 9999; text-align: center; } I was having an issue with the logo not be centered even though it was set at 50%. It needed to be just slightly off -- 48%.

@tuanphan - I am having a similar issue if you have time to help. I have a large site title/logo on all of my pages other than the homepage. Hamburger nav on desktop. When i open my nav, the logo behind it was getting in the way. I added in some CSS to adjust the Z index but that kept making my X disappear. I adjusted and got the X back but I still can't click my top link and really don't want it to go any lower (would love to raise it even more really). Lastly, my site title/logo isn't staying centered when I adjust my page size. They wanted a logo at the very top of the page and I couldn't get it high enough by just using the top of the top section. https://emu-blackbird-p2a2.squarespace.com/history password: 1234 The issue is on every page except the homepage because there is no site title/logo in the nav there. Current css for the nav: .header--menu-open .header-menu { z-index: 1; } .header-title { z-index: 0; position: relative; } .header--menu-open .header-title { pointer-events: none; } .header--menu-open .header-menu { pointer-events: auto; } .header-nav, .header-actions { display: none;} #collection-672c0c0fbfedb5226efa84cb .header-title { display: none; } @media (max-width: 768px) { .header-title { display: none; } } .header--menu-open .header-menu { padding-top:20px !important; } .header--menu-open .header-menu a { margin: 0px; padding: 10px 20px; line-height: 1.5; } .header-burger { display: flex;} #collection-672e01135944530ab8fcc64a, #collection-672d0b21de7b685ab788663c, #collection-672e056bffd4ac32c352929d, .header-burger { position: relative; top: -60px; } .top-bun, .patty, .bottom-bun { height: 2.5px !important; } .header--menu-open .header-menu { visibility: visible; opacity: 1;} .header-menu-nav-item a { font-family:'rift'; padding: 14px 16px; font-size: 48px; color: white; text-align: center; margin-left: 4vw; } .header-menu-nav-item a:hover { color: #C1976C !important; } //underlines for nav// .header-menu-nav-item a::after { content: ''; display: block; width: 30%; height: 3px; background-color: #C1976C; transition: width 0.3s ease, opacity 0.3s ease; position: absolute; left: 35%; bottom: 0; opacity: 1; } .header-menu-nav-item a:hover::after { width: 0; opacity: 0; } @media (max-width: 768px) { .header-menu-nav-item a:hover::after { width: 30% !important; opacity: 1 !important; }} .header-nav-item--active a, .header-menu-nav-item--active .header-menu-nav-item-content { background-image: none;}

I am also looking for this. I tried SquareKicker's plugin but it doesn't quite seem to work with a gallery. I can put images on sections and horizontally scroll through that but it's hard to get things lined up as I want that way.

Ok actually, I am realizing the flaw with my code is that the fade in starts as the page loads so if I put 3 seconds, that has faded in long before you get to an image at the bottom of the page. Can anyone help me with this please? How do i switch it to not start fading in until you get to that section/ scroll down?

For anyone else looking to do similar, I used this: #block-yui_3_17_2_1_1732376100964_42031 { animation: fade-me-in 3.5s ease-in-out forwards; } @keyframes fade-me-in { 0% { opacity: 0; } 50% { opacity: 0.4; } 80% { opacity: 0.7; } 100% { opacity: 1; } }

@tuanphan - Thank you! For some reason it won't allow me to mark it as a solution but that was perfect.

I forgot that the image fade-in option was for classic editor. I have a handful of images that I want to fade in. This site is a for a historical society and is very text heavy so I don't want the whole site to fade in. I am trying to get the images to fade in using: @keyframes fadeMe { from { opacity: 0; } to { opacity: 1;}} .fe-block.fe-block-yui_3_17_2_1_1732376100964_42031 { opacity: 0; animation: fadeMe 1s 1.5s forwards; } I am trying to fade in the newspaper clipping images. If someone could please help me with adjusting my code for the first one, I can get the block IDs/fe-blocks for the others. Screen shot to show the one I am attempting right now. It's the first photo collage (all just one actual image) on the History page. https://emu-blackbird-p2a2.squarespace.com/history code: 1234 The block ID is #block-yui_3_17_2_1_1732376100964_42031.

@tuanphan - That's awesome! Thank you! seadragon-marlin-z77k.squarespace.com/about code 1234 The three "learn more" links on the About page.

@tuanphan - I appreciate the attempt but this unfortunately did not fix it. I had tried something similar when I first set up the pinned image. I just tried your code as well hoping that mine was just a little off. I don't think I will have a ton of iPad views for this site but it's still driving me crazy that I can't figure it out.

@tuanphan - Yes! I assume I need an SVG and some javascript? I wouldn't necessarily need it to actually wiggle like theirs (would be cool though!) but just appear as a squigly underline that appears on hover would work too.

@tuanphan - Thanks for responding! I have two sticky images on the site. One is on the homepage where your image shows https://seadragon-marlin-z77k.squarespace.com/ and one is on https://seadragon-marlin-z77k.squarespace.com/about where my image shows. I am having the same problem with both on ipad view. Password: 1234

I am also having an issue with portrait mode iPad view if you have time to share your thoughts, @tuanphan. On my About and Homepage I have pinned images. When scrolling on ipad it oddly displays the color block under it. I'd like for portrait mode in ipad to just display those pages as it would for mobile (unless there is some other pinned image fix? I haven't been able to find one). Ideally in landscape view, it would stay as is because that is working well on ipad. https://seadragon-marlin-z77k.squarespace.com/ Code:1234 In the attached screenshot (iPad) you can see the orange spacing under where I am scrolling. I am not getting this on desktop and on mobile, it switches to a different view where I stack the text under and over the photo block.

I am interested in trying this too! Did you figure it out @litlstudio? I have seen it here: https://www.mica.edu/ when you go under the "Explore MICA" tab.