I inherited a Drupal site recently that I'm having a bit of trouble with. Essentially, I need to hide a menu in a mobile view, but still remain visible on a desktop. So far, I've added this to my css file:

/* Mobile Hide */
    @media (max-width: 991px) {
        .mobile-only {
          display:none !important;

          .desktop-only {
            display:block !important;

Using Chrome, when I apply the "mobile-only" class to the div I'm trying to disappear, it works perfectly. The only problem is I have no idea how to actually apply this class to the real div in the server's files. How can I apply this to an actual file in Drupal?

Thank you.

1 Answer 1


You shouldn't need a specific class to complete this. Just assign the div to something like

@media (max-width: 991px) {
    #menu{display: none;}

If you need to add the class to the div you can use jquery.

  • Thank you so much! I had to add a !important, but it worked like a charm.
    – Chris
    Sep 28, 2017 at 19:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.