- This topic has 34 replies, 4 voices, and was last updated 2 years, 8 months ago by David.
-
AuthorPosts
-
September 24, 2020 at 3:18 pm #1457705nik9
Hello,
I noticed that I have a strange sticky header behavior when I open a off canvas. For better understanding, you will find a video in private information.
When the normal header is shown and i open the canvas, is everything working fine. But when I scroll on the page and open the canvas, then the sticky header has not the same behavior as the normal header.
No scroll: https://ibb.co/V3sQ4bY
With scroll: https://ibb.co/R0pB8Yw
I guess this is coming from javascript. Can I somehow adjust the sticky header that this work the same way as the normal header?
Cheers
September 25, 2020 at 1:56 am #1458111DavidStaffCustomer SupportHi there,
be default the Off Canvas Panel overlays the content – not push it to one side – so which custom CSS did you add to make it behave that way?
September 25, 2020 at 2:24 am #1458140nik9Hi David,
I use the off canvas plugin (https://de.wordpress.org/plugins/off-canvas-sidebars/) for this. In a earlier post Tom told me that I maybe can work with them to get what I want. Now this is working like very well.
Only that little UI issue is now here.. But this problem only regards to the sticky header.. the normal GP header works perfectly.
Cheers
September 25, 2020 at 3:27 am #1458216DavidStaffCustomer SupportI am not sure thats possible to resolve.
The GP Sticky nav uses fixed positioning which is relative to the viewport.Where can i see this, ill take a look if anything can be done.
September 25, 2020 at 5:57 am #1458380nik9Hello David
Site info is in Private note available. You have to use the mobile view port and click on “Produkte Filtern”. I guess we have to adjust the javascript in order that the sticky navbar would also pushed to the right.
cheers
September 25, 2020 at 7:21 am #1458466DavidStaffCustomer SupportYou can adjust the sticky navs left position when the OCS Sidebar is active:
.ocs-sidebar-active .navigation-stick:not(.gen-sidebar-nav) { left: 270px; }
Might want to play with some CSS transition to make is slide as opposed to jump.
September 25, 2020 at 9:13 am #1458797nik9Hello David,
Yep, Now i’m playing with this settings here. But it is not perfect. Is there maybe another CSS trick to make this more smooth?
.ocs-sidebar-active .navigation-stick:not(.gen-sidebar-nav) { transform: translateX(270px); transition-duration: 0.36s; }
Also, I need also a make sure that the transformation back is smooth. Currently the sticky nav jumps back. But I have no idea which CSS class I have to us for this. Something with the “.ocs-sidebar-active” but inactive slide back or something.
September 25, 2020 at 1:26 pm #1459140DavidStaffCustomer SupportYou need to set the starting point transform ie. when the OCS sidebar is not optn the translate should be 0 ie.
:not(.ocs-sidebar-active) .navigation-stick:not(.gen-sidebar-nav) { transform: translateX(0); transition-duration: 0.36s; }
September 26, 2020 at 4:04 am #1459636nik9Hmm. But when I use this, the first CSS (push left:270px) is not executed and the sticky header stays. This is a tricky one 😂
September 26, 2020 at 1:21 pm #1460283TomLead DeveloperLead DeveloperTry changing your CSS to this:
.main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) { transform: translateX(0px); transition-duration: 0.37s; } .ocs-sidebar-active .navigation-stick:not(.slideout-navigation):not(.gen-sidebar-nav) { transform: translateX(270px); transition-duration: 0.37s; }
September 27, 2020 at 3:01 am #1460713nik9Hi Tom, oh yeah.. this is working smooth. But not perfect. But I guess I have to play with the animation speed and also with
transition-timing-function
.This is the currents status:
/* Canvas opens */ .ocs-sidebar-active .navigation-stick:not(.slideout-navigation):not(.gen-sidebar-nav) { transform: translateX(270px); transition-duration: 300ms; transition-timing-function: ease-in-out; transition-delay: 5ms; } /* Canvas close */ .main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) { transform: translateX(0px); transition-duration: 200ms; transition-timing-function: linear; }
I’m trying to find out what settings the other plugin developer used for the animation. But I do not find any setting via developer tools and also nothing the the plugin folder. But this should be there somewhere right?
Last thing:
Now the sticky header look almost perfect (need some transition adjustment as mentioned above) but this should be a little thing. But now i just noticed a other UI issue. When the Canvas is already active, and the user scrolls around in the html content, then the CSS is always fired therefore the sticky header and the default header are pushed to right and back. (See video in private info)Is it somehow possible with CSS to keep the header on always left:270 when the canvas is already active in order that this is not jumping around? Or do i need for the javascript?
September 27, 2020 at 11:13 am #1461294TomLead DeveloperLead DeveloperHmm, that’s just the transition firing.
You could try to disable scrolling when it’s open:
html.ocs-sidebar-active { overflow: hidden; }
September 27, 2020 at 10:21 pm #1461691nik9Hi Tom,
I already tried this. The thing is, I use a automatic „scroll to top“ when a filter is selected. With
overflow: hidden
scrolling it not possible anymore but when the automatic scroll kicks in, then the transition is fired again.So „turn off“ the transition when canvas open would be the best thing. But is this somehow possible?
Timing:
I think the animation isn’t triggered at the same time because the class is adding just slightly later than the animation is run. In that case maybe we should hook into Javascript:i found this here:
https://github.com/JoryHogeveen/off-canvas-sidebars/blob/master/js/off-canvas-sidebars.js#L225
https://github.com/JoryHogeveen/off-canvas-sidebars/blob/master/slidebars/slidebars.js#L332September 28, 2020 at 9:39 am #1462548TomLead DeveloperLead DeveloperI played with turning off the transition, but couldn’t get it working properly.
The timing thing may be a question for the developers of that code – they may have a trigger they recommend using.
September 28, 2020 at 9:44 am #1462553nik9thanks Tom,
So there is no way with css to do this? What about jS? Or is this a hard one?
Cheers
-
AuthorPosts
- You must be logged in to reply to this topic.