[CYS Woo Express] Large header

[verofasulo]

Please review Large header.

How it currently looks like:

---

How it's supposed to look like:

Figma - Large screens

Figma - Small screens

[nefeline]

Quick note regarding the icon size: that will be worked on by Guidorah as part of woocommerce/woocommerce#40947 : we should not be hardcoding the width of the icon in patterns.

[gigitux]

Unfortunately, we can't achieve the mobile view. As discussed earlier, we can only "hide" the navigation block in the mobile view.

We can't:

• change the position of the Navigation block (desktop view is at the center, on mobile view is on the right)
• hide specific blocks (Customer Account block and Search Block)

It is worth mentioning that it is possible to hide the Search Block only if it is an inner block of the Navigation block.

cc @verofasulo @nefeline

[verofasulo]

After discussing it on Slack, it looks like this is the only viable—and temporary—solution for mobile:

Let me know if you have any further questions 🙏

[gigitux]

I tried to implement this pattern, but the current approach doesn't work on mobile.

The first row is too large.

cc @verofasulo

[verofasulo]

Thanks for trying it out, @gigitux! 🙏

The first row is too large.

I'm not sure I got the issue 😅

Can't we:

• Align the search bar on the left side;
• Apply the correct spacing between the account and cart icons and align them to the right;
• Apply the correct spacing between the site title and the menu and center-align them?

[gigitux]

As I already mentioned above, on very small screens, the Mini Cart icon falls outside of the screen. For example, this is what happens on the iPhone SE:

There are two fixes:

• Allowing to wrap to multiple lines when there isn't enough space to show the icons on the same row:

• get rid of the Product Search Block.

Any feedback, @verofasulo?

cc @albarin

[verofasulo]

As I already mentioned above, on very small screens, the Mini Cart icon falls outside of the screen.

What I was suggesting was to fix the spacing between the cart and the account icons, which is currently wrong, and see if it improves the mobile screen too. The correct spacing is 16px:

I'm also not getting why the site title and the hamburger menu are misaligned:

[gigitux]

@verofasulo thanks for the feedback, but it is the same issue:

Even if I put 0px, on some devices, there is the issue:

[verofasulo]

Adding a comment here for visibility: we decided to change the header design, both on large and narrow screens.

@gigitux proposed to replicate Zalando header, and it looks really good — here's an initial video and here's the convo on Slack.

@gigitux, could you please share a link to the header here once you're done so that I can have a last look? Thank you!

cc @albarin