Mobile menu @media (max-width: 1200px) not working anymore

[Marcus08]

Hello,

I have a problem with the breakdown of the header-menu.
I want the mobile menu to show on @media (max-width: 1200px. Everything works fine however the dropdown is not working? @media (max-width: 979px) everything works fine.

Could you please help? Thx in advance!

X-theme: Latest version
Cornerstone: Latest version

[rad]

Hi @Marco,

Thanks for reaching out.

Please change this custom CSS of your 1200px block

.x-nav-wrap.mobile.collapse.in{
display:block;
}

to this

.x-nav-wrap.mobile.x-collapsing, .x-nav-wrap.mobile:not(.x-collapsed){
display:block;
}

Hope this helps.

[Marcus08]

Hi,

Sorry, mobile menu on 1200 px is still not working.

[paul.r]

Hi,

I checked and can see there are syntax error in your css codes.

Your @media is not properly closed.

Please change the code that reads

@media (max-width:1200px) {
    .x-nav-wrap.desktop {
        display: none;
    }
    .x-btn-navbar {
        display: block;
        float: right;
    }
    @media (max-width:1200px),
    all .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
    @media (max-width:1200px),
    all .x-nav-wrap.mobile {
        display: block;
    }
    @media (max-width:1200px),
    all .x-nav-wrap.mobile.x-collapsing,
    .x-nav-wrap.mobile:not(.x-collapsed) {
        display: block;
    }

to this

@media (max-width:1200px) {
    .x-nav-wrap.desktop {
        display: none;
    }
    .x-btn-navbar {
        display: block;
        float: right;
    }
 
  .x-nav-wrap.mobile.x-collapsed {
        display: none;
   }
   .x-nav-wrap.mobile {
        display: block;
    }

  .x-nav-wrap.mobile.x-collapsing,
    .x-nav-wrap.mobile:not(.x-collapsed) {
        display: block;
    }

}

Hope that helps

[Marcus08]

Hi, Yes this fixed the problem. Thank you!

[paul.r]

You’re welcome!