fix: reduce cls caused by nav

[fkakatie]

Description

Currently, all header height styles are located in block/header/header.css, which is lazy-loaded. This generates significant CLS when the loaded content in main is shoved down to accommodate the newly loaded stylesheets impacting header and nav. Proposing to move header nav styles impacting height into styles.css so circumvent this issue. Also proposing the removal of duplicative styles.

Before vs. After

Changed

• header nav and main height set in styles.css, rather than in the lazy-loaded header block

Removed

• duplicative css

Test URLs

• Before (Changes from main): main--merative2--hlxsites.hlx.page
• After (Changes from this PR): nav-cls--merative2--hlxsites.hlx.page
• Before (Changes from main): main--merative2--hlxsites.hlx.page/clinical-development
• After (Changes from this PR): nav-cls--merative2--hlxsites.hlx.page/clinical-development
• Before (Changes from main): main--merative2--hlxsites.hlx.page/blog
• After (Changes from this PR): nav-cls--merative2--hlxsites.hlx.page/blog

[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

• 7732329 🔄 (latest)
• a9990ab ✅
• a7d261b ✅
• 3b59dc3 ✅

[aem-code-sync]

Page	Scores	Audits	Google
/
/blog
/clinical-development

[amol-anand]

Looks good to me. Thanks @fkakatie !

@helms-charity please take a look and merge when you have a moment.

[helms-charity]

I appreciate the fix, looks good