Question 231336 in CSS Question posted in
Some basic documentation can be found here.

Css – How to hide labels on small screen?

I have antd menu with labels and icon.
Here is the minimal representation of design.
Codesandbox

Now what I want is to hide the labels and show only icons when menu is starting to show ellipsis. As I am not so fluent with CSS, I wonder if this can be done by means of antd.

Tags:

2

Answers


  1. 0

    You need to use media queries and set display none your labels below a certain size.

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

    I would personnaly advice you to take this one above ( It’s the most common one used for the swap between desktop & mobile)

    Last thing think about center your menu items on mobile with a justify-content: center 🙂

    Login or Signup to reply.
  2. 0 
    @media only screen and (max-width : 991px) {
   .ant-layout-header .ant-menu-item .ant-menu-title-content{
      display: none;
   }
}

    Take a parent class above the menu so that this css doesn’t appear on any other page

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search