left-side sticky box

8 Posts

info50172 posted this 15 October 2021

Hello,

I'm trying to create a 60px-wide info box with a fixed position on the screen. To do that I used the CSS position: sticky.

.sticky { position: -webkit-sticky; position: sticky; top: 200px; left: 0px; z-index: 100; }

As you can see in the video, it works quite well if I consider the scrolling, but it doesn't if I change the screen width. How can I anchor it to the left side of the viewport? left: 0px apparently doesn't work.

Thank you very much!

Hello, I'm trying to create a 60px-wide info box with a fixed position on the screen. To do that I used the CSS `position: sticky`. `.sticky { position: -webkit-sticky; position: sticky; top: 200px; left: 0px; z-index: 100; }` As you can see in the video, it works quite well if I consider the scrolling, but it doesn't if I change the screen width. How can I anchor it to the left side of the viewport? `left: 0px` apparently doesn't work. Thank you very much!

sticky

Pagina-1---Personale---Microsoft--Edge-2021-10-15-15-33-18.mp4

Vote to pay developers attention to this features or issue.

4 Replies

Order By: Standard | Newest

Support Team posted this 19 October 2021

Hello Stefano,

First, try to use position fixed for your custom CSS code and left: 0px
If problems still appear, please provide your project.zip saved as a Project in Nicepage Desktop so we could check the issue.

...................................................
Sincerely,
Negat Veri
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hello Stefano, First, try to use position fixed for your custom CSS code and left: 0px If problems still appear, please provide your project.zip saved as a Project in Nicepage Desktop so we could check the issue. ................................................... Sincerely, Negat Veri Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp

8 Posts

info50172 posted this 21 October 2021

Hello,

thank you for your answer. I see no difference. In the attachment, you have the project file.

Hello, thank you for your answer. I see no difference. In the attachment, you have the project file.

Test-fixed-left-bar.zip

8 Posts

info50172 posted this 29 October 2021

Hello,

Did you check the project? Can you help me with that?

Hello, Did you check the project? Can you help me with that?

Support Team posted this 01 November 2021

Hello Stefano,

We are terribly sorry for the delay.
We checked your code. You need to define the width (60px as you told before) of your custom block, otherwise, such block will take all possible width. Also, you need to set the element position and reset Nicepage margins as this is the Nicepage element.
For example:

.fixed {
    position: fixed;
    left: 0px;
    z-index: 100;
    margin: 0!important;
    width: 60px!important;
    top: 200px;
}

Then you need to add a media query to control custom block parameters for different breakpoints.

Please also check the premade examples over the internet to adapt them for your needs.

...................................................
Sincerely,
Negat Veri
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hello Stefano, We are terribly sorry for the delay. We checked your code. You need to define the width (60px as you told before) of your custom block, otherwise, such block will take all possible width. Also, you need to set the element position and reset Nicepage margins as this is the Nicepage element. For example: .fixed { position: fixed; left: 0px; z-index: 100; margin: 0!important; width: 60px!important; top: 200px; } Then you need to add a media query to control custom block parameters for different breakpoints. Please also check the premade examples over the internet to adapt them for your needs. ................................................... Sincerely, Negat Veri Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp

Last edited 01 November 2021 by Support Team

left-side sticky box

Company

Product

Themes & Templates

Nicepage

Web Design