Changes to address header QA review

[techmaven]

Issue

Fixes #170

Test URLs

• Before: https://main--extweb-academy--aemsites.aem.page/
• After: https://170-header-qa--extweb-academy--aemsites.aem.page/

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• e432bf2 ✅ (latest)
• aec715b ✅
• 23f038f ✅
• 04cec82 ✅
• 32491fa ✅
• 2e8efa4 ✅
• f4f5f17 ✅
• 3cdab7e ✅
• 8c537ba ✅
• c6f1e74 ✅
• 3f709ec ✅
• 1a08258 ✅
• 55615cd ✅
• 80ab817 ✅
• 7ec7a93 ✅
• 540eadc ✅
• c2a84c4 ✅
• c43014a ✅
• 9aa67dc ✅
• fb444a2 ✅
• f2d9463 ✅
• 9066b24 ✅
• 9c46685 ✅
• 5bcc925 ✅
• 585b1bd ✅
• dbe13f3 ✅
• b8b9dfe ✅
• 6db32f7 ✅
• f23cd5e ✅
• 4af1353 ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/
🖥️	/

[amarghioali]

Hello @techmaven @sthirumal @helms-charity

I have reviewed the 170-header-qa branch and compared the new menu implementation against the live WB site.
Below are my observations regarding the current status:

1. Desktop

• Header Height: There is a minor height discrepancy. The reference site is 101px while our project is 79px (defined by --nav-height: 79px; in style.css). We should verify if this variable is used elsewhere before changing it to match the reference.

• Hamburger Navigation: The close button is positioned too far to the left; it should be closer to the "Menu" label as seen on the reference site.

• Vertical Alignment: The .section.tabs-container has inherited margins that are affecting the vertical alignment of menu items. Setting margin-top: to 0 on this class appears to fix the alignment. In my view, this is acceptable, but worth noting.

• Spacing & Dimensions: Column dimensions and the spacing between items (e.g., "About The World..." and "Accountability") are slightly smaller than the reference. In my view, this is acceptable too, but worth checking.

• Dropdowns: In the "Where We Work" menu, the dropdown arrow for the "Browse by Country" selector does not match the reference design.

2. Mobile

• Header & Icons: The mobile header looks good overall. There are minor differences in the positioning of the "three dots" icon and the font size for "Academy."

• Three Dots Menu: When the menu is open, the menu items and the main container have different dimensions compared to the reference.

• Responsiveness: On resolutions below 450px, the globe icon looks acceptable. It could be slightly smaller to match the reference perfectly, but it is functional as is.

• Hamburger Menu: The mobile menu generally looks good, though there are slight differences in item positioning and height.

Let me know if you need more details on any of these points.

Thanks,
Bogdan

[amarghioali]

Overall, the header functionality looks great. There are just a few minor visual discrepancies that need to be adjusted to match the reference site.
Kindly check my detailed comments:
#186 (comment)

[InasPlayground]

did some more work on headers,
Please check it and let me know what else needs fixing