Ant Design: How can I disable border-bottom of a menu item on hover?

user_5534469 0
Viewed 2937

I want to modify the default style of a Menu Item (which has a Search Bar inside it), I want to remove the border-bottom property which is appeared by hovering over the item (search bar)

<Menu theme='light' className='nav-bar' mode='horizontal'>
      <Menu.Item disabled style={{ color: '#262626', fontSize: '1.5rem' }}>
        {/* <Title style={{color: '#40a9ff'}} level={4}>Dokan</Title> */}
        Dokan
      </Menu.Item>

      <Menu.Item className="modified-item">
        <Search
          placeholder='input search text'
          onSearch={(value) => console.log(value)}
        />
      </Menu.Item>

      <Menu.Item className>Change Theme</Menu.Item>

      <Menu.Item className>Home</Menu.Item>

      <Menu.Item className>Checkout</Menu.Item>
    </Menu>

what I have tried is:

.modified-item:hover {
  border-bottom: none;
}

but it didn't work.

antd redux reactjs css javascript
5 Answers
.ant-menu-horizontal > .ant-menu-item::after,
.ant-menu-horizontal > .ant-menu-submenu::after {
  border-bottom: none !important;
  transition: none !important;
}
user_168655590

border-bottom: none; is not a style option that exists in css. try border-bottom-style: none; or opacity: 0;

user_124780960

Instead of using className in Menu.Item use style property

<Menu.Item style={{borderBottom:'none'}}>
    <Search
      placeholder='input search text'
      onSearch={(value) => console.log(value)}
    />
</Menu.Item>
user_141718430 
.ant-menu-item:hover::after {
  border-bottom: none !important;
}

This will work

user_151886560

Add Style to Your Menu Tag as below

<Menu
        onClick={this.handleClick}
        selectedKeys={[current]}
        mode="horizontal"
        className="pb-3 pl-3 pt-3"
        style={{borderBottom: "none", lineHeight:"0px"}}
      >
user_113554930
Related