Skip to content

Fix buggy header navigation bar#1157

Merged
jbubar merged 2 commits intohackforla:gh-pagesfrom
akibrhast:1055-fix-buggy-header-nav
Mar 6, 2021
Merged

Fix buggy header navigation bar#1157
jbubar merged 2 commits intohackforla:gh-pagesfrom
akibrhast:1055-fix-buggy-header-nav

Conversation

@akibrhast
Copy link
Member

@akibrhast akibrhast commented Mar 3, 2021

Fixes #1055

  • Fixes the buggy navigation bar, where it would default to open state in mobile view to now defaulting to being on closed state by default.
  • The header navigation bar disappear from page (when the navigation bar is closed by clicking the X icon, and the viewport resize to >= 768px)

@akibrhast akibrhast requested a review from qiqicodes March 3, 2021 16:29
@qiqicodes
Copy link
Member

qiqicodes commented Mar 3, 2021

A1. The navigation bar is still buggy, where it would default to open state in mobile view

Screen.Recording.2021-03-03.at.10.03.27.AM.mov

B1. After closing the header navigation, the hamburger navigation icon remains until it is 768px for width.

B2. The header navigation bar disappears from 768 - 975px.

Screen.Recording.2021-03-03.at.10.10.20.AM.mov

@akibrhast
Copy link
Member Author

@qiqicodes It seems to be working fine on my side. Were those videos run before or after cache clearing?
I have tested it out both on chrome and edge.

@akibrhast
Copy link
Member Author

akibrhast commented Mar 3, 2021

@qiqicodes After our zoom screen sharing just now. I have been unable to replicate the issue on my end. I have tried replicating the issue in both chrome and edge whilst setting the height to 962px as your video has it. However I am still unable to replicate what your video shows. I have confirmed that @qiqicodes did clear her cache. @qiqicodes Could you please provide the chrome version that your test in the video ran on?

@drubgrubby @jbubar - Would it be possible for you folks to pull this and try it out on your end. If you are able to replicate the problems as shown in the video. Could you please give details on how you managed to replicate it .. Since I am not able to.

1157_hack4la

@qiqicodes
Copy link
Member

@akibrhast I'm running the latest Chrome version. I have tried rendering the page again with docker. The navigation bar still drops down.
Screen Shot 2021-03-03 at 11 18 39 AM

@kevinreber
Copy link
Contributor

@qiqicodes I also noticed this issue on my machine, but it rarely happens on my end. Tried recreating the issue it on Safari with @akibrhast and didn't have any problems.

I'm working on macOS Catalina

Mac OS

Chrome

Copy link
Contributor

@kevinreber kevinreber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Works on my machine

Copy link
Member

@jbubar jbubar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@akibrhast this is great!
It fixed a few bugs with the nav!
and the code is simpler too.

@jbubar jbubar merged commit bbea329 into hackforla:gh-pages Mar 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix buggy header navigation bar when resizing from desktop view to mobile view

4 participants