How set menu and header at top when scrolling ?

Hi Vivient,

You can use the Sticky option for the header to make it fixed while the page is scrolled.

...................................................
Sincerely,
Hella
Nicepage Support Team

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

Ok I done it but i would like to apply a reduction something like :
-ms-transform: scale(0.8, 0.8 );
-webkit-transform: scale(0.8, 0.8 );

can you help me ? what are the class to set ? for header menu and logo

Hi Vivient,

You can find the appropriate classes using the Inspect Element functionality. As an example, you can use this class for the whole sticky header:

.u-sticky, .u-overlap .u-header

It will include nested containers for the logo and the navigation so you could use something like:

.u-sticky, .u-overlap .u-header > .u-logo, .u-sticky, .u-overlap .u-header > nav.u-menu

But note that we do not support custom modifications.

...................................................
Sincerely,
Hella
Nicepage Support Team

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

I would like to reduce the headar and logo when scrolling
I'm using this in test here http://nauticeayachting.fr/nauticea/Accueil.html :
<script type jQuery(window).scroll(function() {

    var scroll = jQuery(window).scrollTop(); 
    if (scroll >= 120) { 
            jQuery(".u-header").addClass("tiny");            
            jQuery("nav.u-menu").addClass("tiny"); 
            jQuery(".u-logo").addClass("tiny");                  
    if (scroll <= 120) { 
            jQuery(".u-header").removeClass("tiny"); 
            jQuery("nav.u-menu").removeClass("tiny");
            jQuery(".u-logo").removeClass("tiny");                                
                                     } });
</script>

and these css class tiny
/begin-variables custom-site-css/
.u-header.tiny{
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
-ms-transform: scale(0.7, 0.7);
-webkit-transform: scale(0.7, 0.7);
transition: all 0.5s ease;}
}
.u-logo.tiny{
-ms-transform: scale(0.7, 0.7);
-webkit-transform: scale(0.7, 0.7);
transition: all 0.5s ease;}
nav.u-menu.tiny{

-ms-transform: scale(0.7, 0.7);

-webkit-transform: scale(0.7, 0.7);
transition: all 0.5s ease;}

but it's not working ... does I 'm missing something ?

just to know :
why are you using u- into the name of css class ?

Thanks for helps

Hi,

Usually, we do not provide support for custom code. But please check the browser console. Looks like there is an error in the code. An extra ")".

why are you using u- into the name of css class ?

To avoid conflicts with styles applied by the third-party components to the page elements.

...................................................
Sincerely,
Olivia
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, nice page i am editing my website but when i see in the preview, it's not showing me my saved. For example i colored a text back from white but in preview, it will show white why?

Hello,

Please specify what application are you using to build your website, Nicepage desktop application or Online Editor?
We need more information regarding your issue, some screenshots would be helpful too.

Kindly ask you to create a new topic regarding your issue with details.
Thank you for your cooperation.
...................................................
Sincerely,
Anna T.
Nicepage Support Team

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