Menu To Sticky menu problem | PenciDesign Support

Rboullay replied

4 years ago

Customer Reply

ok he is happy so am i

thanks

Rboullay replied

4 years ago

Customer Reply

i see it works fine on your side

i will wait my client answer

thanks

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

1. The code in the previous reply doesn't relevant to this problem,

2. Here is a screen recorder from my phone (Safari IOS):

https://streamable.com/usq23o

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

you must look with iphone not a browser web simulator

Works fine now with webrowser but not in iphone

Rboullay replied

4 years ago

Customer Reply

i remember having same problem with this website

https://www.espaces-couleurs.fr

at that time the team dev of the template wrote this to solve the issu

@media only screen and (max-width: 768px) {
   .eltdf-animate-mobile-header.mobile-header-appear {
       margin-bottom: 0 !important;
   }
}

.eltdf-mobile-header .eltdf-mobile-nav {
   height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
   max-height: 80vh;
   overflow: auto;
}

maybe it can help you?

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

I've checked your site many times but still have not found the animation issue when the header transforms from normal to the sticky:

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

look

Rboullay replied

4 years ago

Customer Reply

you will see it easily in a post and if you scroll down slowly

It seems to jump down approximativaly 100 px down

Rboullay replied

4 years ago

Customer Reply

Yes i see the same jump

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Here is a video from my Chrome developer tool:

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

look

Rboullay replied

4 years ago

Customer Reply

Can load mov file

Rboullay replied

4 years ago

Customer Reply

i will make you a video tomorrow but now there is a sort of jump down when we scroll down and menu change to sticky menu

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please clear all the browser cache then check again, here is video recorder from my phone:

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

sorry but i can't see really a difference??

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

You can update by yourself by adding this CSS code to your site:

@keyframes penciheadersitcky {
  from {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.penci_navbar_mobile.mobile-sticky {
  animation-name: penciheadersitcky;
  animation-duration: 0.5s;
}

Regards,
PenciDesign.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please send me your WordPress admin account in a PRIVATE reply. I'll log in and update it.

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

hello

Still waiting a solution ??

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

I'll try to update this feature for your site today.

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

hello,

sorry but i still waiting please

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

I'm currently working on this issue, please keep wating.

Thank you for your patience.

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

Hello

have you some news for me please?

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

I'll try to improve this feature in the next week.

Please keep waiting.

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

hello, do you have an idea of the delay because it is the last thing i am waiting in order to put new website online :)

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

This is an animation issue on mobile devices, please wait for me to find the best solution for this case then reply to this ticket soon.

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

Sorry can't see any change?

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please modify the CSS code like this:

.penci_navbar_mobile .penci_container {
    display: block !important;
    opacity: 1!important;
}
.penci_navbar_mobile {
    transition: visibility 0.1s ease, opacity 0.1s ease, transform 0.3s ease;
}

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

ok i ve put the code again in order to let you see that it doesn't change the problem sorry

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Have you added the custom CSS code I sent? I've checked but have not found the code on the browser.

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

Hello,

doesn't work sorry?

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.penci_navbar_mobile.mobile-sticky .penci_container {
    display: block !important;
    opacity: 1!important;
}

Regards,
PenciDesign.

Rboullay started the conversation

4 years ago

Conversation Start

Hello, i send you a video in order to let you see a little problem.

The menu is craching the page when we goes down on mobile

Can you solve this little problem?

Thanks