SVG icon disappears when collapsing a sidebar

user_2102292 0
Viewed 250

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)

LIVE JS FIDDLE

what am I doing wrong?

UPDATE with Nimeshka Srimal answer:

I tried to apply the suggestion of Nimeshka Srimal but then, when toggling the sidebar the svg image gets smaller. It solved my problem but it created a new one.

enter image description here

JS FIDDLE with Nimeshka Srimal answer implemented

svg css html
1 Answers

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 class="card-header" id="headingOne">
  <h5 class="mb-0 d-flex flex-nowrap">
    <svg id="projectsSvg" ...></svg>
    <div class="sidebar-item">
      <button
        id="btnProjectsSidebar"
        ...
      >
        <span id="sidebarProjectsText text-nowrap">Projects</span>
        <i id="profile-chevron-down" class="bi bi-chevron-down ml-2"> </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;
}
user_35713660
Related