Global & Local Nav Bars visual refinements

[beafialho]

Here are a few visual enhancements we can make to these bars:

• Arrows in Global Nav Bar should match with Local Nav Bar's
• The active menu link (News in this case) should be bold and highlighted through color #7B90FF
• The "Get WordPress" button should have a 2px border radius and its text should be bold

Currently:

Intended:

• Search icon should be centered to its container:

• The header responsiveness isn't ideal at the moment, because the links jump straight into the smallest version of the … nav, when they should go in there gradually. Here's what we could use to improve that: https://css-tricks.com/the-priority-navigation-pattern/

responsive.news.mp4

On mobile:

• Let's decrease the text size of the submenu items
• "Close" icon should be inside its container
• "Close" section and the menu's background should be a darker shade specified in Figma #1C2024

[tellyworth]

@jeffikus or @kellychoffman is this something your teams could help with?

[kellychoffman]

If someone can implement, we can review.

[MaggieCabrera]

Working on this over at WordPress/wporg-mu-plugins#20

[MaggieCabrera]

I've done everything in the linked PR above except the item about the responsive menu with the .... I don't think we can do much about it without some heavy handed JS, is that something we want to do?

[dd32]

responsive menu with the .... I don't think we can do much about it without some heavy handed JS

I think this is something worth splitting into a separate PR for visibility and implementation.

To me it feels like the user experience would be worth the potentially heavy JS, even though for most users it would only ever be run once (upon load, as they wouldn't usually be resizing the window often).

It would make it easier to bring it to localised sites too, where translations of menu items can be much longer than the English counterparts.

[MaggieCabrera]

I think this is something worth splitting into a separate PR for visibility and implementation.

Perfect then WordPress/wporg-mu-plugins#20 is ready for review for the rest of the issues

It would make it easier to bring it to localised sites too, where translations of menu items can be much longer than the English counterparts.

+1 I agree, I just wanted to make sure this is what we wanted to do

[MaggieCabrera]

The menu script is over here: WordPress/wporg-mu-plugins#21

[mikachan]

Hi all. Just checking if there is any remaining work to do from this issue, as it looks like @MaggieCabrera has finished the two remaining tasks:

• 'Search icon should be centered to its container' was fixed in Global nav refinements wporg-mu-plugins#20
• The header responsiveness was addressed in Add priority navigation script wporg-mu-plugins#21

Is there anything else from the above that needs to be worked on or reviewed?

[kellychoffman]

Ah, I didn't see those PRs. Would be good to mark a designer as a reviewer in the future.

For now: Can we see the changes in WordPress/wporg-mu-plugins#20? Via a screenshot. Or possibly update the test site? Whatever is easiest.

[mikachan]

Yep OK, we'll make sure we add a designer as a reviewer in the future 👍

Yes, sure - here are some screenshots from WordPress/wporg-mu-plugins#20:

Search icon centered to its container at large resolutions:

Here's a screenshot that shows the arrows, active menu link, and Get WordPress button updates:

I've just noticed a few other bugs with the search icon at smaller resolutions, so I'll open up a PR for them as soon as I can.

[mikachan]

Here's a PR for the search improvements: WordPress/wporg-mu-plugins#25