How to hide tabs on small screens?
P粉520204081
2023-08-17 12:53:57
<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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 :)