1 : Using the minicart in header : works well when use ajax add to cart to open on adding but when the header moves up it doesn’t open. Ideally should open even if header scrolls up ans not in viewport.
2 : minicart contents goes behind the wp admin bar
As soon as the header gets transformed outside if the viewport, the mini cart inside will be transformed as well. This is the expected behavior and can’t be avoided as far as I can see.
this is not a real problem from my point of view, because no normal user will ever see the WP Admin bar, right? However, this can be solved quite easily and added as an improvement if necessary:
1 : Mini cart is set to Ajax - open on add to cart, and its set to right as off canvas. So yes customer would like to see the product added in cart whenever they add any product. Everyone would not keep a sticky header for that to work as its doing now. There must be some way for that.
2: customers won’t see the admin bar, but while designing the cart people may add extra padding on top thinking that padding is less, but on the customer’s end it would get much padding. Yes have used this as the workaround for now.
An alternative is that you use a custom toggle element, an offcanvas element in e.g. your footer (so that it remains when the header is transformed) that contains a custom cart loop and can be opened with the toggle (and/or with a click interaction on the add to cart button).
I’ve already added #2 as an improvement to our todo list.
Thanks for the example! That’s exactly what I said before: the offcanvas element is not in the header in that case, but outside - and that’s why it works.