refactor(header): modernize navigation with improved UX, i18n and accessibility#135
Open
hijuliancode wants to merge 3 commits into
Open
Conversation
This commit modernizes the header navigation component with improved
mobile UX, accessibility, and maintainability.
- Add 21 i18n translation keys for all menu labels and descriptions
- Convert Features/Resources toggles from <a href="javascript:void(0)">
to semantic <button> elements for accessibility
- Extract inline styles to CSS classes (.sl-page-shell, .sl-header-sticky)
- Unify breakpoint value: 1278px across all media queries and JavaScript
- Add data-breakpoint="1278" attribute to #navBar as single source of truth
- Remove ~20 !important declarations from responsive CSS (improved specificity)
- Add animated chevron icons to Features/Resources mega-menu toggles
(Font Awesome icon, smooth 180° rotation with cubic-bezier easing)
- Improve action button styling in mobile drawer:
* Create Free Account: full-width, solid background, subtle shadow
* Sign in: full-width outline style with transparent background
* Active state: scale(0.98) for tactile feedback
- Normalize nav item spacing: consistent padding 1.1rem vertical, 1.5rem horizontal
- Hide descriptions in drawer mode to improve mobile readability
- Add smooth transitions: 0.15s-0.25s ease on interactions
- Define 21 base English keys in i18n/en.yaml:
* header_menu_features, header_menu_resources
* 4 Feature items + descriptions (Email Aliases, Custom Domains,
Browser Extensions, Sign in with SimpleLogin)
* 6 Resource items + descriptions (Blog, Documentation, FAQ, Forum,
GitHub, Status) + Comparisons section
- Translate all keys to: ES, FR, DE, IT, NL, and other site languages
- WCAG AA compliant: semantic buttons, ARIA attributes maintained
- Screen reader friendly: aria-expanded, aria-haspopup, aria-controls
- Keyboard navigation: buttons focusable and operable
- Mobile touch: proper tap targets (36px minimum)
- Breakpoint consistency: CSS variables + JavaScript data attribute
- No cascade conflicts: removed !important by improving selector specificity
- Mobile-first approach: base rules for mobile, progressive enhancement
- Performance: GPU-accelerated transitions, no layout thrashing
✓ Visual: 320px (mobile), 640px (CTA visible), 768px (Sign in), 1278px+ (desktop)
✓ Interaction: drawer toggle, mega-menu expand/collapse, button clicks
✓ i18n: English base, verify translations in at least 2 other languages
✓ Accessibility: keyboard navigation, screen reader testing
✓ Browser: Chrome, Firefox, Safari (mobile + desktop)
Co-authored-by: Julian Alejandro Sosa - hi@juliansosa.com
Author
|
Hi @nguyenkims, I have pushed a new commit with style improvements. 
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR modernizes the header navigation component, focusing on accessibility,
maintainability, and mobile UX — while preserving the existing visual identity.
Changes
Accessibility
<a href="javascript:void(0)">to semantic<button>elements (WCAG AA compliant)i18n
CSS / Structure
Mobile UX
Testing
Verified at 320px, 640px, 768px and 1278px+ breakpoints.
Tested in Chrome, Firefox and Safari (mobile + desktop).
Hugo v0.94.2 extended on macOS.
Notes
No changes to site structure, content, or existing i18n strings.
All new keys have fallback values so missing translations degrade gracefully.
Trade-offs: Replacing HSMegaMenu with Custom Header Logic
I replaced HSMegaMenu mainly to fix layering: we needed reliable control so the overlay sits above the header while keeping menu panels on the correct level.Doing this with the plugin plus custom behavior was causing conflicts, so a small custom implementation was more predictable.
Screenshot
Before
Header:
Submenu:
After
New header:
New submenu - features:
New submenu - resources:
