Home  >  Q&A  >  body text

How to hide tabs on small screens?

<p>I have an antd menu with labels and icons. This is the minimal representation of the design. Codesandbox</p> <p>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. </p>
P粉520204081P粉520204081452 days ago583

reply all(1)I'll reply

  • P粉785905797

    P粉7859057972023-08-18 11:16:22

    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 :)

    reply
    0
  • Cancelreply