responsive-nav.js icon indicating copy to clipboard operation
responsive-nav.js copied to clipboard

Flash on page load on desktop

Open olach opened this issue 9 years ago • 0 comments

Just had this problem on desktop where the menu would be hidden on page load, and shown after a second. I localized the problem to your css where the menu is hidden by default, and then shown when the class 'closed' is sets by js.

I would suggest a change here so that the menu always would be visible on desktop. There should be no need to wait for a class name to be set by js for the menu to be shown.

My proposed fix for this is to change some lines in responsive-nav.css. https://github.com/viljamis/responsive-nav.js/blob/master/responsive-nav.css#L39-L49

Replace this css:

@media screen and (min-width: 40em) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}

With this css:

@media screen and (min-width: 40em) {
  .js .nav-collapse {
    position: relative;
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}

olach avatar May 22 '15 09:05 olach