The problem here is that the close class has overall strange behavior.

On a mobile screen the close class actually opens the sidebar, while omitting it closes it.

This seems to be some hack to transition a responsive desktop site which has a sidebar to a mobile width and auto-closing the sidebar. However, this transition does not happen by using the close class correctly...

EDIT:

The solution is to add the following styles, which makes consistent close class behavior on mobile and desktop:

/* Fix `close` style on mobile */
@media screen and (max-width: 768px) {
  /* Fix behavior for when sidebar should be open */
  body .sidebar {
    transform: translateX(300px);
  }
  body .content {
    transform: translateX(300px);
  }
  .sidebar-toggle {
    background-color: rgba(255,255,255,0.8);
    transition: 1s background-color;
    width: 284px;
    padding: 10px;
  }

  /* Fix behavior for when sidebar should be closed */
  body.close .sidebar {
    transform: translateX(0);
  }
  body.close .content {
    transform: translateX(0px);
  }
  body.close .sidebar-toggle {
    background-color: transparent;
    width: auto;
    padding: 30px 30px 10px 10px;
  }
}

Note that this does have a strange behavior when actively changing the resolution of your screen, you will see a CSS transition. If someone knows how to fix this, without disabling the transition altogether, let me know.

Uh oh!

disable/hide sidebar at onload #442

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions