Store Customization > Update the Centered Header Menu with Search Pattern

[nefeline]

We have received the following feedback from @verofasulo regarding the Centered Header Menu with Search Pattern ( reference: Mrk6SERPZ4KrFHSjM0a8TK-fi-6347_54034 ):

This header needs to be polished—some minor tweaks:

• “Search your store” is not centered. And it would be lovely to increase the spacing on the left, it’s very compressed against the edge.
• The cart icon and the price are not centered.

Menu:

• we need to increase spacing between menu items—they are too close to each other.

Screenshot of the menu:

@verofasulo would you please provide the updated design for this header to ensure we can match your expectations? Apart from the cart icon and the price not being centered, all other requested changes involve spacing and it would be great to have precise values to work with.

Also, regarding your question:

Why do we have a blog page? Let’s not add any blog page as default.

The following area of this pattern:

Corresponds to the Navigation Block, so the content is dynamically changed depending on the user's default menu: this means this menu was created with this structure on WooExpress out-of-the-box.

I suggest that if we make any changes, do them on the initial site setup for Woo Express and do not create a blog page at all.

According to this feedback we need to add a width to the site logo as well Mrk6SERPZ4KrFHSjM0a8TK-fi-6660_69538

Scope

• Ensure the cart icon and the price are centered
• TBD (additional changes pending design to ensure we follow the expected spacings)

[verofasulo]

would you please provide the updated design for this header to ensure we can match your expectations?

@nefeline sure! I guess this header was designed by @jarekmorawski and you can find the proper design here.

I can see that the spacing between menu items is 30px.

Corresponds to the Navigation Block, so the content is dynamically changed depending on the user's default menu: this means this menu was created with this structure on WooExpress out-of-the-box.

@manospsyx @PanosSynetos could we please remove Blog from the pages generated by default on Woo Express, please? 🙏

[PanosSynetos]

could we please remove Blog from the pages

@verofasulo I'll move this specific issue to the calypso bridge repo, to further discuss it there, in order not to pollute this thread :) I'll ping you

Closing the loop - I created this Automattic/wc-calypso-bridge#1321 in the bridge

[verofasulo]

I'll move this specific issue to the calypso bridge repo, to further discuss it there, in order not to pollute this thread :) I'll ping you

Thanks, @PanosSynetos!

[albarin]

@verofasulo

• “Search your store” is not centered. And it would be lovely to increase the spacing on the left, it’s very compressed against the edge.
• The cart icon and the price are not centered.

Sorry, I'm not getting this, could you clarify? Do you mean "Search our store" is not centered inside the search input? What about the cart and price? Centered vertically in respect of the whole menu? Thanks 🙏

[albarin]

@verofasulo

• “Search your store” is not centered. And it would be lovely to increase the spacing on the left, it’s very compressed against the edge.
• The cart icon and the price are not centered.

Sorry, I'm not getting this, could you clarify? Do you mean "Search our store" is not centered inside the search input? What about the cart and price? Centered vertically in respect of the whole menu? Thanks 🙏

@verofasulo I have made some updates to the Header #11304, I think some of the changes you were commenting are still missing. But I have updated margins and mobile behavior.
I don't think we can achieve the exact design we have in Figma, sadly, GB does not help a lot in defining different behaviors for a group of blocks in mobile. The demo site is updated with the latest changes, could you have another look? 🙏

[verofasulo]

Hey @albarin!

I just checked but I see the same behavior:

Maybe I'm using the wrong test site? 🤔

[albarin]

@verofasulo You are using the correct one, probably someone else updated the plugin with a different version and removed the changes in the pattern. I just updated it again.

[verofasulo]

Thanks, @albarin! 🙏

@jarekmorawski, do you know where I can find the mobile design of this header?

It doesn't look right 😅 The account and cart icons there are very odd. Thank you! 🙏

[verofasulo]

@nefeline we have the same issue here 😊