Anyone fancy a real CSS challenge

[Jammyllama]

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

[Shikkediel]

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.

[Shikkediel]

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…

[Jammyllama]

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 :)

[Shikkediel]

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.

[Shikkediel]

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.

[Author]

Posts