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

[qiqicodes]

Overview

The header navigation bar is buggy when resizing from desktop view to mobile view.

The issues follow:

• The header navigation bar drops down without clicking the navigation icon. (when resizing the page from desktop view to mobile view where the viewport width is < 768 px)
• The header navigation bar disappear from page (when the navigation bar is closed by clicking the X icon, and the viewport resize to >= 768px)

Images below shows the bug flow：

the header navigation bar drops down with navigation icon when viewport's width is less than 768px.

the header navigation bar remains open after one click on top right navigation icon, now close icon substitutes navigation icon.

after one click on top right X icon

header navigation disappears when resize back to >=768 px

Resources

https://www.hackforla.org/about-us

[akibrhast]

@drubgrubby @daniellex0 I Just want to double check with everyone if this is a bug or intended behavior? Cause the above mentioned behavior is the same across the entire site.

[jbubar]

If I remember correctly, I think it is a bug that we all decided would not be worth the time to fix a while ago... but I think we are reconsidering it now.. lol

[drubgrubby]

@akibrhast (@daniellex0)- I believe it is a bug, but it's not a bug on the about-us page, it's a bug with the mobile navigation, which is on all pages. It seems like there are two things, one is the one that Qiqi mentioned, that if you open the mobile menu, then expand the page so the regular navigation shows, and then you shrink the page again, the navigation appears already dropped down. I think we decided that this is a minor bug, and maybe not worth fixing if that were the only problem.

However, the larger bug is this one:

It seems that if you open the mobile navigation, and then close it, and then expand the page, there is a point where there is no navigation at all. You may have to play around and see exactly what situation this happens in, but clearly it happens sometimes, and it's not good.

[qiqicodes]

@drubgrubby Should I edit the title of this issue and address the issue as a mobile navigation issue?

[drubgrubby]

@qiqicodes - That would be nice. Just remove the about-us reference.

[akibrhast]

Update

The issue starts happening when moving from 767px to 768px and then it resolves it self after 850px

Resources

@media (max-width: 767px)
.main-header {
    position: fixed;
    padding: 7px;

@media (min-width: 768px)
.main-header {
    padding: 20px 10px 10px 10px;
    padding-top: 20px;
    position: fixed;

• website/_includes/main-nav.html

  Line 1 in 8760bd1

  <nav class="header-nav" id="headerNav">

• _includes/hamburger-nav.html