hide sidebar with main menu at 768px browser width

Hi Anne,

Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 768px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

If that doesn’t work then please post admin login details in private so that we can have a closer look.

Best regards,
Rikard

Hi,

We added added the following css codes in the Quick CSS field.

@media only screen and (max-width: 768px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }

  .responsive #top #wrap_all .container {
      width: 85%;
      max-width: 85%;
      margin: 0 auto;
      padding-left: 0;
      padding-right: 0;
      float: none;
  }

  .responsive #top #wrap_all #header {
      position: relative;
      width: 100%;
      float: none;
      height: auto;
      margin: 0 !important;
      opacity: 1;
      min-height: 0;
  }

  .responsive #top .av-main-nav .menu-item {
      display: none;
  }

  .responsive #top .av-main-nav .menu-item-avia-special {
      display: block;
  }

  .responsive.html_header_sidebar #header .av-main-nav > li {
      margin: 0 10%;
  }

  .responsive #top #wrap_all .main_menu {
      top: 0;
      height: 80px;
      left: auto;
      right: 0;
      display: block;
      position: absolute;
  }

  .responsive.html_header_sidebar #main {
      border: none;
  }

  .html_cart_at_menu.html_header_sidebar #header_main .avia-menu {
      margin-top: 0;
  }

  .responsive #top #main {
      padding-top: 0 !important;
      margin: 0;
  }

  .responsive #top .logo {
      position: static;
      display: table;
      height: 80px !important;
      float: none;
      padding: 0;
      border: none;
      width: 80%;
  }

  .responsive .logo img {
      height: auto !important;
      width: auto;
      max-width: 100%;
      display: block;
      max-height: 80px;
  }

  .responsive #top .av-logo-container .avia-menu {
    height: 100%;
  }

  .html_cart_at_menu.html_header_sidebar #header .av-main-nav-wrap {
    width: auto;
  }
}

You may need to adjust a few elements such as the logo.

Best regards,
Ismael