visible-on-sidebar-mini css problem

[p-clark]

When collapsing or expanding the sidebar, the icons do not change from 'fa-ellipsis-v' to 'fa-navicon'.

The visible-on-sidebar-mini and visible-on-sidebar-regular are the css classes specified.

From the navbar.component.html:

<nav #navbar class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-minimize">
            <button id="minimizeSidebar" class="btn btn-danger btn-fill btn-round btn-icon">
                <i class="fa fa-ellipsis-v visible-on-sidebar-regular"></i>
                <i class="fa fa-navicon visible-on-sidebar-mini"></i>
            </button>
        </div>

[chelaruc]

@p-clark can you give me the css code for both classes?

[p-clark]

Hi @chelaruc , this is from the unmodified download of the pro version. So all the relevant code should be available there. You can also see this behavior in the demo of the LBD pro version here: https://demos.creative-tim.com/light-bootstrap-dashboard-pro-angular2/dashboard

When the side bar is collapsed, the visible icon is still fa-ellipsis-v.

I am far from competent when working with CSS, so if this is behaving as creative-tim intended, please feel free to close this issue. The reason I brought it to your attention is because the material version does change the icon when the side bar collapses. https://demos.creative-tim.com/material-dashboard-pro-angular2/dashboard

[chelaruc]

@p-clark Thank you for point this to me. All you need to do is to add this code:

.visible-on-sidebar-regular{
    display: none !important;
}
.visible-on-sidebar-mini
    display: inline-block !important;
}

on line 442 in src/assets/sass/lbd/_sidebar-and-main-panel.scss inside .sidebar-mini class.

All the best, Ciprian