visible-on-sidebar-mini css problem
Closed this issue · 3 comments
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>
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
@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