Different Header for Mobile or Hide Widget Area for Mobile

Hey Suze,

Thank you for the inquiry.

You cannot assign a different header on mobile view but you can use this css code to hide the header widgets and adjust the position of the logo and the mobile menu.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */

  .responsive #top #header #header_main .inner-container .widget {
    display: none;
  }

  .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #85a8b4;
  }

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

  .responsive #top #header #header_main .inner-container .logo {
    display: block;
  }
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

This a screenshot of the header after adding the above css.

// https://1drv.ms/u/s!AjjTfXSRbKTvwG-grht5ZEfviqtJ?e=BGO0fq

Best regards,
Ismael