[Resolved] Scroll anchor affecting content beneath it

Home Forums Support Scroll anchor affecting content beneath it

  • This topic has 10 replies, 3 voices, and was last updated 1 month ago by Tom.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1255681
    James

    I’m using this html in my header element I found in another thread for a scroll down arrow to another section on my homepage:

    <a class="smooth-scroll" href="#latest-interview"><img src="image URL"/>

    Underneath is a masonry grid which looks as a masonry grid should – until this code is activated, whereupon it stacks the grid on top of one another. Does anyone know why this might be?

    #1256248
    James

    Bump

    #1256579
    Leo
    Staff
    Customer Support

    Hi there,

    Your site is under coming soon. Any chance you can unlock it so we can see the issue?

    #1256702
    James

    Hi Leo,

    My apologies, I have now removed the coming soon page.

    Just to reiterate, the masonry grid seems to switch to one column once I have added the HTML in my OP to the page header element.

    #1256870
    James

    Any ideas guys?

    #1256954
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The coming soon page still seems to be up. Can you check?

    Are you adding it as a “Header Element”?

    It can take up to 24 hours for us to reply to a topic (especially on a Sunday), although it’s usually much quicker than that. Feel free to bump a topic if it takes longer than that 🙂

    #1257059
    James

    Ah sorry, my bad!

    I’m adding the scroll button at the bottom of my existing page header element. I’ll re-up the proper link tomorrow once the site goes live.

    Thanks!

    #1258124
    Tom
    Lead Developer
    Lead Developer

    One thing I noticed about your code above is that it’s missing a closing </a> tag.

    Try this:

    <a class="smooth-scroll" href="#latest-interview"><img src="image URL"/></a>

    #1261099
    James

    The extra </a> solved it. Thanks Tom.

    #1261476
    James

    Anyone know how I can get it to be in the same place on numerous devices?

    I used something like

    .page-hero .inside-page-hero a {
    top: 48vh !important;
    position: relative;
    }

    And it’s still not positioning correctly on all devices. Any ideas? The site is now open and you’re looking for a white arrow!

    #1262104
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    .page-hero {
        position: relative;
    }
    
    .page-hero a.smooth-scroll {
        position: absolute;
        bottom: 30px;
        top: unset !important;
    }
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.