[mikewolf1127Participant]

My web site is http://www.mikewolfpost.com

I have a 1920×1080 (16×9) slider that I am using above the masthead. It is rotating frames of HD material I have worked on. I have a static layer with my logo in it

I placed the logo in the static layer in the top/let corner of the slide as I want it to stick to the top and the left edge of the frame. However, it seems to be wanting to live in the top/left corner of an invisible 16×9 area within the browser no matter what size the browser is. So it only lives in the correct spot if the browser happens to be sized to 16×9, and it floats around when the browser is resized.

What settings should I use to make the static slide logo stick to the top/left of the browser no matter what shape the browser window happens to be?

Essentially I want it to behave just like the Scroll Bottom Anchor.

Thanks.

[Rue NelModerator]

Hello There,

Thanks for writing in!

That happens because the position of the logo gets calculated according to the browser size. To make the position always on the top left corner of the slider, you can make use of this code instead. Please add this code in your customizer, Appearance > Customize > Custom > CSS

.tp-static-layers .tp-static-layer {
    top: 10px !important;
    left: 10px !important;
}

Let us know if this has been helpful to you.

[mikewolf1127Participant]

Geniusness. Thanks again!

[ThaiModerator]

You’re most welcome.

[mikewolf1127Participant]

This code freezes all static layers to 10,10-

.tp-static-layers .tp-static-layer {
    top: 10px !important;
    left: 10px !important;
}

Is it possible to target only one static layer so that the first static layer is fixed (as above) but the second layer uses default behavior?

http://www.mikewolfpost.com

[Paul RModerator]

Hi,

You can change the code to this.

.tp-static-layers .tp-static-layer:first-child {
    top: 10px !important;
    left: 10px !important;
}

Hope that helps.

[mikewolf1127Participant]

Awesomeness. Thanks for the quick response!

[ZeshanMember]

You’re welcome!

[mikewolf1127Participant]

I upgraded to Slider Revolution 5 and this functionality does not work anymore. Is there new CSS to have the first static layer in the slider be fixed on screen (see above)? Again, I want to make the static slide logo stick to the top/left of the browser no matter what shape the browser window happens to be? Essentially I want it to behave just like the Scroll Bottom Anchor.

And only the first static layer. We had it working with Slider Revolution 4.x

Many thanks.

[Paul RModerator]

Hi,

Kindly replace the code with this.

.tp-static-layers .tp-mask-wrap .tp-static-layer:first-child {
    top: 10px !important;
    left: 10px !important;
}

Hope that helps.

[mikewolf1127Participant]

That did not work. Still floating.
http://www.mikewolfpost.com

[Paul RModerator]

Hi,

Sorry about that, the code should be.

.tp-static-layers .tp-parallax-wrap:first-child {
    top: 10px !important;
    left: 10px !important;
}

Hope that helps.

[mikewolf1127Participant]

Yessir! Many thanks.

[ZeshanMember]

You’re welcome! 🙂

[Author]

Posts