I am currently working with the following CSS code:
#masthead {
transition: left linear 0.25s;
-moz-transition: left linear 0.25s;
-o-transition: left linear 0.25s;
-webkit-transition: left linear 0.25s;
-ms-transition: left linear 0.25s;
transition: right linear 0.25s;
-moz-transition: right linear 0.25s;
-o-transition: right linear 0.25s;
-webkit-transition: right linear 0.25s;
-ms-transition: right linear 0.25s;
}
My goal is to have transitions for both left and right positions, but I'm encountering issues with this setup. This is due to the restriction of having the same property declaration in the CSS selector.
I attempted a different approach, which was to combine the properties like so, however, this did not yield the desired results:
#masthead {
transition: left, right linear 0.25s;
-moz-transition: left, right linear 0.25s;
-o-transition: left, right linear 0.25s;
-webkit-transition: left, right linear 0.25s;
-ms-transition: left, right linear 0.25s;
}
I also experimented with using transition: all linear 0.25s;. However, when the page is scrolled, the header becomes sticky with a top bar that is 25px high, causing the header to transition to the top when the top bar is hidden on scroll. Additionally, I have off-canvas menus that slide out from the left and right sides, pushing the header accordingly.
The specific behavior I want to achieve is the shifting of the header either left or right based on triggers, rather than transitioning it vertically with position: top.
If you have any insights on how to address this issue, as resources on W3schools do not seem to provide a solution, please let me know!
Cheers