themesberg/pixel-bootstrap-ui-kit

Navbar dropdown menu resize bug

vidasci opened this issue · 5 comments

Describe the bug
When resizing to smaller browser width and going back to full width, navbar dropdown menu is broken

To Reproduce
Steps to reproduce the behavior:

  1. Open home page
  2. Resize browser to a size where nav-menu items collapse
  3. Click on hamburger-menu item to open dropdown menu
  4. With dropdown-menu open, resize browser back to full width
  5. All menu items are now expanded and there is no way (apart from refreshing the page) to get rid of the dropped down menus

Expected behavior
Same dropdown functionality as before resizing browser.

Screenshots
resize_bug

If anyone experiences the same problem, here is a temporary (hacky) fix:

window.addEventListener("resize", function(){
    if (document.body.clientWidth > breakpoints.lg){
        document.getElementsByClassName('navbar-collapse')[0].classList.remove('show')
    }
})

Accidentally closed issue

Hey @vidasci,

Thanks for opening the issue and for the temporary fix. We'll address this in the next update where we will also bump the Bootstrap version to a stable one.

@vidasci there is a script in pixel.js where the hover and click actions are being added. For example, when on mobile, there is no hover action, and on the desktop there is. It is true that this can happen if you resize the browser window, but if you access the web page from a mobile/tablet device, or if you refresh the browser in a new viewport setting, this error does not happen.

I agree it is not very likely to happen as it will only occur when resizing the browser window to small and than back to large, thanks for looking into it!