Moving Elements in a Sticky Header
I have a header that has two rows of content. When the user scrolls down the page, I want to collapse the second row and then move the search bar and Component B up to the first row. Is this possible with CSS only? If not, what I'll probably do is just add them in both rows and then show/hide them depending on if the header is collapsed.
CodePen: https://codepen.io/mandy-h/pen/qBGVpxK
6 Replies
Also, I don't want to use absolute positioning.
What if the header (row-1) is fixed and scrolling the page moves row-2 up and over row-1? When row-2 content is 'in place', it becomes fixed and looks like it moved into row-1 but really is just sitting on top of it.
(I'm imagining row-2 has no background and its content would already be aligned to avoid the menu/logo.)
Otherwise, I think your alternative solution would be fine.
Side-note:
Is there a specific reason Components A & B aren't already in the header? Are they page-specific instead of site-wide? If so, adding them to the header might not be a good idea unless the same behavior is duplicated throughout the site. Once a user has seen a site's header, they're not expecting it to change and may not look there when they 'need' to. The animation might help draw their attention to it, but if it doesn't hurt the design/layout to have it directly below the header I'd consider keeping it there so it's more obvious that it's a page-specific feature for the user.
Business wants to add additional content to the top row later, so I can't have things breaking out of the layout flow.
They are site-wide components. This is what the designer gave me, unfortunately.
I think your plan of showing/hiding them depending on header collapse might be your best bet, but someone else might have a cool unique take on it.
I think this is what you want?
https://codepen.io/kevinpowell/pen/BaembPO
This is the only way I can think of doing this with CSS only, because of the way position sticky works... But a very big caveat here, in that I'm not sure you should implement it like this 😅
display: contents basically makes the element it's declared on not really there anymore. Sort of like a display: none, but while none hides that element and all it's children, contents keeps the children, which is why the sticky works.
It's long had accessbility issues, where it would strip the semantics away from the element it's being declared on, because of how it works. It shouldn't do that, but it does. Or, well, it did.
A lot of the bugs on that front have been fixed, and a quick test here does show the header still in the accessibility tree in Chrome, but I haven't tested it anywhere else... if you are going to go this route, please test it across browsers to ensure that the header is still actually a header everywhere 🙂Not quite what I'm looking for, but I think I got it figured out! Sorry, I probably should I have created some simple visuals to better explain what I needed.