I had a similar issue.
I extended Luma theme and changed basic colors and some layout. I also changed the position of the Cart
icon and the Search bar to be at top next to "Login or Create an Account
" in .panel.wrapper
.
Issue: turned out the header content
was overlapping/covering .panel.wrapper
, therefore, preventing users to click it on. So when users from Mobile devices click on the Cart icon, they are actually clicking on the header content
div. I found this when I open the browser console and I was unable to select cart from the Element Select Tool.
Solution:
1- Reverse my action and let Cart and Search icons be back at header content
2- (I only tried this from browsers console)
Increased the height
of .panel.wrapper
to be at least larger, in terms of height, than the Cart and Search icons. 40px in my case seemed good. This allowed the cart icon to take it's position without being covered by header content
.
Hope this helps.