How to hide tabs on small screens?

Question

I have an antd menu with labels and icons. This is the minimal representation of the design. Codesandbox

Now what I want is to hide the label and only show the icon when the menu starts showing ellipses. Since I'm not very familiar with CSS, I was wondering if this functionality could be achieved via antd.

Answer 1

You need to use media queries and set the tag to display none below a specific size.

@media only screen and (max-width : 768px) {
    span.ant-menu-title-content {
    display: none;
    }
}

I personally recommend you to use the above (it is the most common way to switch between desktop and mobile devices)

Finally, consider using justify-content: center to center menu items on mobile devices :)