ReactStrap: Unable to hide navbar item according to screen size

user_8965420 0
Viewed 123

I am following the documentation in order to show a NavItem only for screen widths larger than sm.
According to the documentation, I have to use this attribute:
enter image description here
I tried it here:

  <NavItem className=".d-none .d-sm-block .d-md-none">
              <NavLink
                data-placement="bottom"
                target="_blank"
                title="Profile"
                onClick={() => {
                  props.history.push("/profile-page");
                }}
              >
                <i className="fa fa-bell " />
                <p className="d-lg-none">Notifications</p>
              </NavLink>
            </NavItem>

But, this seems to have no effect. The navBar item (Notification Bell Icon) still gets displayed for widths larger than sm:

enter image description here

Any idea what I am doing wrong?

reactstrap bootstrap-4 reactjs css html
1 Answers

You should use class names without dot <NavItem className="d-none d-sm-block d-md-none">

user_99073340
Related