Hide inline menu on mobile with media query

[WaggingLabs]

I’m trying to hide the inline menu I created for social media on screens smaller than 375px wide. I tried using the following css, but the menu simply flashes as if it’s trying to hide, but can’t.

Credentials to follow

@media screen and (min-width: 0px) and (max-width: 374px){

.e1800-7 .x-menu .x-menu-inline {
display: none !important;
}
}

[nabeel]

Hi @WaggingLabs,

Thank you for reaching out to us. Try this, give your Navigation Inline element a class inline-menu-el first (see screenshot)

Then add the following code in your Header CSS section:

@media screen and (max-width: 374px) {
  .inline-menu-el {
    display: none;
  }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!