addisonpann

I would like the nav dropdown menu to be the width of the title of the folder title (Case Studies), not the folder contents, with a bit of padding on either side. Any idea how I would do that? Site URL: http://addisonpann.com

I tried this to no avail. Site URL: https://addisonpann.com/greenslate Any idea why?

Using Chrome's dev tools, I found that the z-index for back-to-top was indeed 9, despite having set the z-index of the button to 999. I was able to achieve the effect I'm looking for by targeting the code block with the HTML that generates the back-to-top button. The button was inheriting its z-index from the code block.

The back-to-top must be inheriting its z-index from somewhere. I set it to 999 with... z-index: 999 !important; ...and it's still stuck below the lady icon. Why would changing the z-index work for you but not for me?

Site URL: https://addisonpann.com/greenslate I made a "back to top" button with a code block and CSS. It floats in the bottom right of the screen and is hidden beneath the top couple sections of the page so that it "appears" after the user has scrolled down some. On mobile, the button is hidden beneath images and shapes, despite having a much higher z-index than almost anything else on the page. Any idea why this might be?

I added your code to my site, and it's a step in the right direction, but it isn't quite right. It hides a portion of my first section's image under the header. Any idea why that would be? https://addisonpann.com/greenslate

I did not. I'll probably post a request for help in the near future once I've finished with some other stuff.

Oops. Thanks for that. What should my targets be instead of the following? body.homepage div#site { padding-left: 0px !important; padding-right: 0px !important; } body.homepage div#canvas { max-width: 100% !important; } body.homepage { overflow-x: hidden; } body.homepage section#page { max-width: 100% !important; }

I've tried this on my site to no avail. Any chance you could assist me too? https://www.addisonpann.com/greenslate I'm trying to make the hero banner full bleed across the width of the page. Thanks!

Site URL: https://www.greenslate.group/ Site password: toast I want to change the section height of the hero banners on all pages of my site (Portfolio, About, and Services, as they are the only ones with hero banners). They're set to Medium height in the Format menu, which I like for desktop, but I want them to be Small height when viewing the page on a mobile device. Apologies in advance if there is already a thread that solves my issue; I looked, but none of the resolved threads were quite what I am looking for. Thanks!

Yes, apologies. https://gardenia-blenny-f8sl.squarespace.com/portfolio Password: toast

Hi, friends. I'm attempting to remove the zoom effect that occurs when hovering over a portfolio grid image. Go to Portfolio from the nav bar and scroll down to "Recent Work." When you hover over the image for "Pebble House" you'll see the animation I'm trying to get rid of. Thanks in advance for any and all assistance!

Site URL: https://addisonpann.art password: toast Using code provided by these forums, I have been able to initiate a caption overlay on masonry grid images upon hover. It works like a charm on my Graphic Design page, but the Hand Drawn page's captions appear dimmed, and I'm thinking they may be below the partially-transparent overlay. Here's the CSS I'm using: /* ------- GALLERY CAPTIONS --------*/ .gallery-caption-grid-masonry p.gallery-caption-content { font-family: "Helvetica Neue", sans-serif; font-size: 2vw !important; font-weight: 500 !important; text-transform: uppercase; line-height: 1.2em; color: #E19D9D; margin: 1.5em !important; } /*---- CAPTION HOVER OVERLAYS ------*/ .gallery-caption-grid-masonry { opacity: 0; z-index: -1; transition: all .2s; position: absolute; top: 50%; transform: translateY(-50%); left: 0; text-align: center; color: #fff; height: 100%; max-width: 100vw; padding: 0; } .gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before, .gallery-masonry-item a:before { background-color: rgba(0,0,0,.5); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .5s; } .gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry { z-index: 999999; opacity: 1; height: auto; } .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-grid-masonry:before, .gallery-masonry-item:hover a:before { opacity: 1; transition: all .5s } .gallery-caption-grid-masonry .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; text-align: left; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; font-size: 2em; font-weight: 400; margin: 2vh 2vw; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; } I'll admit I haven't used z-index much in the past, and I'd imagine the issue stems from that. Why do the captions display correctly on the Graphic Design page, but not on Hand Drawn? Thanks in advance!

For anybody stumbling across this later on, I managed to make it work. The overlay displays while the images underneath are clickable. Here's the code I used: .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; pointer-events: none; } (That's the only thing I changed since my previous post asking for guidance)

I believe I've copied all the code above correctly, but my masonry grid images are still not clickable. Any idea why? addisonpann.art/portfolio/graphicdesign Password: toast CSS: .gallery-caption-grid-masonry { opacity: 0; z-index: -1; transition: all .2s; position: absolute; top: 50%; transform: translateY(-50%); left: 0; text-align: center; color: #fff; height: 100%; max-width: 100vw; padding: 0; } .gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before, .gallery-masonry-item a:before { background-color: rgba(0,0,0,.4); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .5s } .gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry { z-index: 999999; opacity: 1; height: auto; } .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; } .gallery-masonry-item:hover .gallery-caption-grid-masonry:before, .gallery-masonry-item:hover a:before { opacity: 1; transition: all .5s } .gallery-caption-grid-masonry .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; text-align: left; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; font-size: 2em; font-weight: 400; margin: 2vh 2vw; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; } Also, in .gallery-caption-grid-masonry I added max-height: 100vw because the overlay wasn't filling the width of the container. Is there a better way to ensure the overlay fills the container's width?

You've done it again. Thanks a bunch, @bangank36. How do you know which selectors to use? Are you just doing right click > inspect?

Site URL: https://www.addisonpann.art/ Website password: toast I've applied an underline animation to my navigation links when they're in a hover state. This is the code I used: .header-nav-item--collection a { display: inline; position: relative; overflow: hidden; } .header-nav-item--collection a:after { content: ""; position: absolute; z-index: -1; right: 0; width: 0; bottom: -3px; background: #E19D9D; height: 1px; transition-property: width; transition-duration: 0.3s; transition-timing-function: ease-out; } .header-nav-item--collection a:hover:after, .header-nav-item--collection a:focus:after, .header-nav-item--collection a:active:after { left: 0; right: auto; width: 100%; } I'm looking to add this exact same animation to my pagination titles when hovered over, but haven't had any luck so far. Any help would be appreciated. 🙂

Thank you so much for your help. This worked like a charm! Now on to the next CSS project 🙂

@bangank36 I was able to get the caret to change color in hover state by using the following CSS code... .white.item-pagination[data-collection-type^="portfolio"] .item-pagination-icon svg:hover { stroke: #F599A4; } ...but still curious if there's some way to get both the caret and pagination text to both change color, even when only one is hovered over.

Portfolio pagination can be found by selecting either Graphic Design, Hand Drawn, or Photography, and scrolling to the bottom. Pagination will be on the left/right/both sides of the screen, dependent upon which section you're in. I've attached a screenshot of the bottom of the Hand Drawn page. On the right, you'll see the pagination text, when hovered over, changes color, but the caret does not. P.S. Thanks for your reply. Apologies it took so long to get back to you. I'll turn on notifications so I can stay on top of this in the future.

Site URL: https://www.addisonpann.art/ URL password: toast So far (with help from this community) I've added custom CSS to change the color of my Portfolio pagination when it's in a hover state. What I'd like to happen is have the caret also change color upon hover. Furthermore, is there a way to have both the title and caret icon change color when only one is being hovered over? Thanks in advance, and please let me know if you need any further information.