Hide elements according to screen size

With @media of CSS you can do this. JavaScript is not required to resolve this.

I left comments in the CSS code below to make it easier to understand. The operation is simple: all menu items with class mobile will only appear when the screen is less than 360px .

.mobile {
    opacity: 0; /* Esconde no desktop. */
    height: 0;
}

@media only screen and (max-width: 360px) {
    .mobile {
        opacity: 1; /* Só aparece no mobile. */
        height: auto;
    }
}

<li class="drop-left"><a href="">Drop Left</a>
    <ul>
        <li><a href="#">How deep?</a>
            <ul>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="mobile"><a href="#">Item Mobile</a></li>
            </ul>
        </li>
    </ul>
</li>

Below you can read more about @media of CSS:

  

link

Note: display: block is not always optimal because you can not use it for example if the element has display: inline . In this case you should display: none / dispaly: inline and not block .

See the image to better understand this observation. The <li> element by default has the display set by the Chrome user as display: list-item , so if you put <li> with the dispaly: block property it will lose list-style and is without the "ball" as you can see in the image:

You can use a CSS3 feature called media queries .

The operation is simple, see an example:

.menu-toggler {
  display: none;
}

@media screen and (max-width: 500px) {
  .menu-toggler {
    display: block;
  }
}

What the above code does is simple: by default, the element that has the menu-toggler class is hidden. It only appears on devices with screens that have a size of at most 500px .

I suggest you read:

• link
• link