[Resolved] Push sticky nav to right when canvas opens

[Tom]

Is this set up on a staging site? I’m not able to find the URLs you shared before – any chance you can re-share them?

I’m not noticing any of the issues above on your live site.

[nik9]

Hello Tom,

Sorry, I forgot that case here 🙂

No, this is the prod system. We have more than one problem. The first problem, that on mobile it does not work on all browsers the same way. On iPhone safari it work ok but on iPhone and Chrome it works but the timing is different.

Do you see a major issue?

/* Canvas opens */
/*
.ocs-sidebar-active .navigation-stick:not(.slideout-navigation):not(.gen-sidebar-nav) {
    left: 270px;
    transition-duration: 300ms;
    transition-timing-function: unset;
}

/* push sticky product filter element to the right when canvas opens */
/*
.ocs-sidebar-active .customsticky.customsticky-style.hide-on-desktop.sticky-element-cloned.element-is-sticky:not(.slideout-navigation):not(.gen-sidebar-nav) {
    transform: translateX(270px);
    transition-duration: 300ms;
    transition-timing-function: unset;
}

/* Canvas close */
/*
@media screen and (max-width: 768px) {
.main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) 	{
    transition-duration: 300ms;
    transition-timing-function: unset;
	}
}	

/* push sticky product filter element back when canvas close */
/*
.customsticky.customsticky-style.hide-on-desktop.sticky-element-cloned.element-is-sticky:not(.slideout-navigation):not(.gen-sidebar-nav) {
    transform: translateX(0px);
    transition-duration: 300ms;
    transition-timing-function: unset;
}

/* Custom darken content when canvas is active */
.ocs-sidebar-active .ocs-close--all:not(.slideout-navigation):not(.gen-sidebar-nav) {
  filter: brightness(0.5);
}

[Tom]

I’m not seeing anything obvious in the code, but it’s not uncommon for effects like this to differ across different browsers.

Any chance you can share a screen recording of what you’re seeing with both browsers? It may make the specific issue more clear to us.

Let me know 🙂

[nik9]

Hello Tom,

Sure, see video link (Video 1) in private note section. Tested with iPhone XS latest version.
On Safari the navigation and sticky section slides to the right and back when I close the canvas. On Chrome it jummps to the right and back after canvas close.

But something what is also strange. After canvas close, the elements wait some time to slide or jump back. But this was working before in a very nice way (see video 2). There was no change in CCS for the animation.. only plugin and theme updates. And it was working in safari AND chrome. so this is very strange.. 🙁

/* Canvas close */
/*
@media screen and (max-width: 768px) {
.main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) 	{
    transition-duration: 300ms;
    transition-timing-function: unset;
	}
}	

/* push sticky product filter element back when canvas close */
/*
.customsticky.customsticky-style.hide-on-desktop.sticky-element-cloned.element-is-sticky:not(.slideout-navigation):not(.gen-sidebar-nav) {
    transform: translateX(0px);
    transition-duration: 300ms;
    transition-timing-function: unset;
}

[David]

I am not sure there is a ‘cure’ for this – do you have it on a staging site ( i cannot see it on the URL provided ) – we can take a quick look to see if theres any obvious reason for it

[Author]

Posts