When you are loading any example page of The Gem with a sticky header, as the real estate example I mentioned, and start scrolling down slowly yo will see what I mean. It is especially visible in Google Chrome - Safari is better.
The issue is when the navigation header gets reduced to smaller height, including the reduced logo size. It is really jiggery and not smooth at all. My client will not accept that as he has noted it too. Is there a way to make the transition smooth, maybe with css?
We use css3 animation for header that change header height, hide big logo and show small logo. We can try to change animation params (duration, timing-function). But we still ca't understand what do you want to have as result. Do you have any example?
I can not see any css transitions applied to #site-header. Can you tell me exactly to which container the transitions are applied to, so I can try to adjust?
Ok. That is the reason why it is jiggering. The transitions need to be applied to the height of the container etc as well. I will do that when I develop and let you know about the outcome.
Hi there,
I'm just starting with this theme the first time. There is an awkward jump on the navigation container when scrolling starts and the navigation is set to be sticky. It is also visible in your demos i.e. https://codex-themes.com/thegem/real-estate/#1459337254369-88dc5b0d-9549
Can the resizing of the container and the logo etc be smoothly transitioned?
Hi, sorry, not quite sure what do you mean. Can you pls provide more details with screenshots?
Hi Max,
When you are loading any example page of The Gem with a sticky header, as the real estate example I mentioned, and start scrolling down slowly yo will see what I mean. It is especially visible in Google Chrome - Safari is better.
The issue is when the navigation header gets reduced to smaller height, including the reduced logo size. It is really jiggery and not smooth at all. My client will not accept that as he has noted it too. Is there a way to make the transition smooth, maybe with css?
Many thanks
otti
We use css3 animation for header that change header height, hide big logo and show small logo. We can try to change animation params (duration, timing-function). But we still ca't understand what do you want to have as result. Do you have any example?
Hi Max,
As an example just view one of your own examples in Chrome: https://codex-themes.com/thegem/real-estate/#1459337254369-88dc5b0d-9549
When you scroll slowly down you can see the jittering jump when the navigation changes from full height to the sticky height.
Here is an example of how smooth it should be (a different WP theme): https://demos.artbees.net/jupiter/clio/
I can not see any css transitions applied to #site-header. Can you tell me exactly to which container the transitions are applied to, so I can try to adjust?
Best regards
otti
CSS transitions are applied to menu items padding.
#site-header.fixed.shrink .header-style-3 #primary-menu.no-responsive > li, #site-header.fixed.shrink .header-style-4 #primary-menu.no-responsive > li {-webkit-transition: padding 0.3s;
-moz-transition: padding 0.3s;
transition: padding 0.3s;
}
Ok. That is the reason why it is jiggering. The transitions need to be applied to the height of the container etc as well. I will do that when I develop and let you know about the outcome.
Thanks very much for your help.
We don't use height transitions because header height is variable and depends on logo size and menu font settings.
Do you see the difference between your menu and the other one I posted as an example?
In your example theme change height from 90 to 55px. Transition style:
.sticky-style-fixed .main-navigation-ul > li.menu-item > a.menu-item-link {On our page theme changes top and bottom paddings from 31 to 16px. Transition style:transition: color .1s ease-out,background .1s ease-out,border .1s ease-out,height .35s ease,line-height .35s ease;
}
#site-header.fixed.shrink .header-style-3 #primary-menu.no-responsive > li.menu-item-current, #site-header.fixed.shrink .header-style-3 #primary-menu.no-responsive > li.menu-item-active, #site-header.fixed.shrink .header-style-4 #primary-menu.no-responsive > li.menu-item-current, #site-header.fixed.shrink .header-style-4 #primary-menu.no-responsive > li.menu-item-active {-webkit-transition: padding 0.3s;
-moz-transition: padding 0.3s;
transition: padding 0.3s;
}
Hi Max,
Thanks for the code snippets. I will look change them accordingly so the flickering is not that noticeable anymore.
Otti