Skip to content

GH-101: Navigation Bar (Responsive Design Sans Search & Icons)#227

Merged
wesleyboar merged 2 commits into
task/GH-101-header-redesignfrom
task/GH-101-header-redesign--mobile-nav
May 21, 2021
Merged

GH-101: Navigation Bar (Responsive Design Sans Search & Icons)#227
wesleyboar merged 2 commits into
task/GH-101-header-redesignfrom
task/GH-101-header-redesign--mobile-nav

Conversation

@wesleyboar

@wesleyboar wesleyboar commented May 21, 2021 •
edited
Loading

Copy link
Copy Markdown
Member

Overview

  • Design the mobile navbar.
  • Better responsive design for header.
  • Technical improvements.

The search bar, icons, menu toggle, and mobile portal nav have not been re-styled yet.

Issues

Changes

Major:

  • New: Add compressed and expanded navbar styles in two files.
  • New: Increase body min-width (to prevent wrap of navbar toggle).
  • New: Remove condition for navbar breakpoint; now it's always 992px.
  • New: Migrate some s-header CSS to […].expanded and […].compressed.
  • New: Use top to position arrows isntead of margin.
  • New: Truncate nav links.
  • New: Style dropdowns.
  • New: Add nav link text span wrappers (to prevent truncation of menu arrows).
Minor
  • Minor: Remove branding images style that is made redundant.
  • Minor: Allow logo height less than 100% (for navbar).
  • Minor: Ensure navbar logo styles do not affect brand bar.
  • Minor: Give limited flexibility to navbar logo.
  • Minor: Use c-logo for branding images.

Testing

  • Resize screen.
  • Compare nav links and dropdown to design.
  • Ensure text or interface is never abruptly cut off.

Notes

Post-Merge Issues

  1. 4a918cd Nav bar menu toggle shows on desktop when in opened state.

wesleyboar added 2 commits May 21, 2021 16:11
@wesleyboar
GH-101: Header (Use .c-logo for Brand Bar Images)
28515e6 
- Remove branding images style that is made redundant.
- Allow logo height less than 100% (for navbar).
- Ensure navbar logo styles do not affect brand bar.
- Give limited flexibility to navbar logo.
- Use c-logo for branding images.
@wesleyboar
GH-101: Navigation Bar (Responsive Design)
c6bff3c 
- Add compressed and expanded styles in two files.
- Increase body min-width (to prevent wrap of navbar toggle).
- Remove condition for navbar breakpoint; now it's always 992px.
- Migrate some `s-header` CSS to `[…].expanded` and `[…].compressed`.
- Use `top` to position arrows isntead of `margin`.
- Truncate nav links.
- Style dropdowns.
- Add nav link text span wrappers (to prevent truncation of menu arrows).
@wesleyboar wesleyboar linked an issue May 21, 2021 that may be closed by this pull request
Header Redesign → FP-1458 #101
Closed
@wesleyboar wesleyboar self-assigned this May 21, 2021
@wesleyboar wesleyboar changed the title GH-101: Header (Use .c-logo for Brand Bar Images) GH-101: Navigation Bar (Responsive Design Sans Search & Icons) May 21, 2021
@wesleyboar wesleyboar merged commit c42d666 into task/GH-101-header-redesign May 21, 2021
@wesleyboar wesleyboar deleted the task/GH-101-header-redesign--mobile-nav branch May 21, 2021 21:34
@wesleyboar wesleyboar mentioned this pull request May 21, 2021
Draft
26 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@wesleyboar wesleyboar

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Header Redesign → FP-1458

1 participant

@wesleyboar