Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Anyone fancy a real CSS challenge

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #273281
    Jammyllama
    Participant

    OK, so maybe you’ll all find this easy. I’d say I’m medium-capable in CSS, but this one is beyond my skill level.

    The WordPress theme I’m using has a lovely animated share button, exceot the position is all wrong.
    https://dsmn8.wpengine.com/how-to-measure-the-success-of-employee-advocacy/

    It’s fixed bottom right and the icons expand upwards.

    I want to have it fixed top left and icons expanding downwards.

    Is it possible? Can anyone help?

    Thanks :D

    #273283
    Shikkediel
    Participant

    This CSS is for the button itself (which you probably figured yourself):

    .nectar-social-sharing-fixed {
        position: fixed;
        right: 34px;
        bottom: 34px;
        height: 50px;
        width: 50px;
        line-height: 50px;
        z-index: 1000;
    }
    

    And to make the children expand downwards, I think you’d just need to remove the negative sign for the translate specified on these items:

    .nectar-social-sharing-fixed:hover .nectar-social a:nth-child(1) {
        -webkit-transition: all 0.45s cubic-bezier(.15,0.2,.1,1);
        -webkit-transform: translateY(-56px) scale(1);
        transition: all 0.45s cubic-bezier(.15,0.2,.1,1);
        transform: translateY(-56px) scale(1);
        opacity: 1;
    }
    

    Edit – and change the value somewhat because they’ll align slightly differently due to default positioning.

    #273285
    Shikkediel
    Participant

    There’s a little trick to see the CSS concerning hover in developer tools by the way, you can right click the element inside the DOM window and select to force any pseudo state…

    #273287
    Jammyllama
    Participant

    Hi @Shikkediel,

    Thanks for that, yeah moving it isn’t a problem, it’s the expansion.

    I tried removing the ‘-‘ and it didn’t work. Maybe I need to add CSS to move each child individually??

    eg- third child has: transform: translateY(-86px) scale(0);

    What do you think?

    Thanks :)

    #273288
    Shikkediel
    Participant

    I still see all elements having a negative translate value.. and indeed there are five rules that would need to be changed, ending in nth-child(1) up to nth-child(5).

    Edit – it’s making a jump I didn’t anticipate on and will have to take a look what is causing that.

    #273289
    Shikkediel
    Participant

    The jump is caused by bottom: 0 inside these rules:

    .nectar-social-sharing-fixed > a {
        height: 50px;
        width: 50px;
        line-height: 52px;
        text-align: center;
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
    }
    
    .nectar-social-sharing-fixed .nectar-social {
        position: absolute;
        height: 50px;
        width: 50px;
        bottom: 0;
        left: 0;
        z-index: 1;
        text-align: center;
    }
    

    If I remove those and make the numbers for translate positive, I think it looks close to what you had in mind.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.