Last Day Spring Sale! Up to 50% off!

Sticky block

aosc83
7 Posts
aosc83 posted this 14 November 2023
Ask a Question

How can I keep a fixed block positioned below the header even as the user scrolls down?

How can I keep a fixed block positioned below the header even as the user scrolls down?
Vote to pay developers attention to this features or issue.
5 Replies
Order By: Standard | Newest
Support Team
Support Team posted this 14 November 2023

Hello Carlos,
Thanks for choosing Nicepage!

If you have a Header that consists of 2 blocks, please select First Header Block >> enable the Sticky on Scroll option. Make the same actions for the Second Header Block and you will see two blocks during the scrolling.

enter image description here

...................................................
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 Carlos, Thanks for choosing Nicepage! If you have a Header that consists of 2 blocks, please select First Header Block >> enable the Sticky on Scroll option. Make the same actions for the Second Header Block and you will see two blocks during the scrolling. ![enter image description here][1] ................................................... 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 [1]: https://i.postimg.cc/90ggMXbV/image.png
aosc83
7 Posts
aosc83 posted this 15 November 2023

Thank you very much for answering my question. It's just that this applies to the header of the entire site and I need to apply it only to a block of a page

Thank you very much for answering my question. It's just that this applies to the header of the entire site and I need to apply it only to a block of a page
Support Team
Support Team posted this 15 November 2023

Hello Carlos,

Sticky on scroll option works only for the header rows.

Let us know in case you have any other questions.
...................................................
Sincerely,
Anna.
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 Carlos, *Sticky on scroll* option works only for the header rows. Let us know in case you have any other questions. ................................................... Sincerely, Anna. Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
aosc83
7 Posts
aosc83 posted this 15 November 2023

And how can I solve it with CSS, I have managed to get it in the position I want, now the problem is when the header submenu is displayed, it is below the block to which I placed the sticky

.Header {
/* Otras propiedades del encabezado /
position: fixed;
z-index: 1000; /
Valor alto para que esté en la parte superior /
}
.u-nav-item.active,
.u-nav-item {
z-index: 1001; /
Un valor más alto que el encabezado para estar por encima /
}
.bloqueservicios {
position: sticky;
top: 157px; /
Ajusta según la altura del encabezado /
z-index: 999; /
Un valor menor para que esté detrás del encabezado y el menú */
}

And how can I solve it with CSS, I have managed to get it in the position I want, now the problem is when the header submenu is displayed, it is below the block to which I placed the sticky .Header { /* Otras propiedades del encabezado */ position: fixed; z-index: 1000; /* Valor alto para que esté en la parte superior */ } .u-nav-item.active, .u-nav-item { z-index: 1001; /* Un valor más alto que el encabezado para estar por encima */ } .bloqueservicios { position: sticky; top: 157px; /* Ajusta según la altura del encabezado */ z-index: 999; /* Un valor menor para que esté detrás del encabezado y el menú */ }
Support Team
Support Team posted this 16 November 2023

Hello Carlos,

Thanks for using Nicepage.

.Header {
position: fixed;
z-index: 1000;
}

.u-nav-item.active,
.u-nav-item {
z-index: 1001; 
}

.bloqueservicios {
position: sticky;
top: 157px;
z-index: 999; 
}

Pay attention to the .u-nav-item.active, which has z-index: 1001; so, when your nav item is active your nav is the highest z index, zo it is top of the top, it is on the front of everything. Pay attention to works of the z index. It works by value if x=2 and y=4 the front will be y and the behind of y will be x.

Please let us know if you have any further questions.
...................................................
Sincerely,
George.
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 Carlos, Thanks for using Nicepage. .Header { position: fixed; z-index: 1000; } .u-nav-item.active, .u-nav-item { z-index: 1001; } .bloqueservicios { position: sticky; top: 157px; z-index: 999; } Pay attention to the .u-nav-item.active, which has **z-index: 1001;** so, when your nav item is active your nav is the highest z index, zo it is top of the top, it is on the front of everything. Pay attention to works of the z index. It works by value if **x=2** and **y=4** the **front will be y** and the **behind of y will be x.** Please let us know if you have any further questions. ................................................... Sincerely, George. Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
You must log in or register to leave comments