Archived topic
merged header transition
9 replies · Started by Axel on September 25, 2020
hi there,
having set navigation as header, sticky navigation, and merged with header element as described here: https://docs.generatepress.com/article/navigation-as-a-header/
working well with one exception...
transition from header to sticky is smooth as expected, but zhe other way round from sticky to header it just 'pops' back suddenly without any transition.
transition for sticky is set to 'none' according your article.
so the question simpy is: how to get the transition smooth both ways?
or wont this work due to the usage of svg logos?
Hi there,
I could be wrong but I think it might be due to the sticky navigation logo.
Can you remove that and test if the transition works without it?
hi leo,
:/ sadly you're not wrong at all ... transition works without it.
but unfortunately the sticky nav logo das to be a different one (without tag line) - so if theres a possible solution to get it done with it that would help a lot.
maybe possible to add an extra transition to the main logo? havent explored yet, but in case of possible interferences i might seach for another solution ...
Hi there,
Try this:
body .main-navigation .sticky-navigation-logo,
body .main-navigation.navigation-stick .site-logo:not(.mobile-header-logo) {
display: block;
height: 0;
overflow: hidden;
width: 0;
}
body .main-navigation.navigation-stick .sticky-navigation-logo {
height: auto;
width: auto;
}hmmm ...
sadly makes no difference. same behaviour as before.
to be honest - cant follow what it should do to make the transition with different logos work :-)
Edited Tom's code a bit:
https://generatepress.com/forums/topic/merged-header-transition/#post-1460206
hi leo,
your edit obviously did the trick! :-)
many thanks.
ps:
leaves me ab bit puzzled, as normally tom is the last to chime in and bring the final solution ;-)
He definitely deserves the credit here as well.
I just made the CSS a little more specific so it doesn't get overwritten.
anyways - works.
meanwhile getting the point what does it... but would have been tried some by far more complicated way :-)
so big thanks to both.
No problem :)
