When I collapse my sidebar I want the text to hide and keep the SVG visible.

It works as expected but for some reason when the sidebar is collapsed, the SVG of 'Projects' disappears (the other svg's are displayed as expected)

What I've tried:

CSS (truncated)

Added a rule to don't show the Projects text when the sidebar is collapsed (not working)

#sidebar.active #sidebarProjectsText{
    display: none;
}

Added a rule to display: block the svg when the sidebar is active or not active (not working)

#sidebar #projectsSvg,
#sidebar.active #projectsSvg {
    display: block;
}

Desired output:

• Text Projects and arrow disappear when collapsing
• Svg image visible always regardless the state of the sidebar (active or not active)

JS FIDDLE with Nimeshka Srimal answer implemented

CodePudding user response：

It is because your styles are applied to the .sidebar-item class and your project menu item does not have that class.

Just wrap it with a <div> or <span> and add the .sidebar-item class.

<div  id="headingOne">
  <h5 >
    <svg id="projectsSvg" ...></svg>
    <div >
      <button
        id="btnProjectsSidebar"
        ...
      >
        <span id="sidebarProjectsText text-nowrap">Projects</span>
        <i id="profile-chevron-down" > </i>
      </button>
    </div>
  </h5>
</div>

You might need to fix the other styles.

Answer to the updated question: Provide a fixed width to the svg icons.

Ex:

.sidebar-element svg {
  min-width: 55px;
}