[Bug] Sidebar and Navbar problem when shrinking window

[lukednguyen]

Version

2.0.1

Reproduction link

https://github.com/creativetimofficial/light-bootstrap-dashboard

Operating System

Windows 10

Device

Laptop

Browser & Version

Firefox 68.0

Steps to reproduce

Sorry for the link, but this can be reproduce by just downloading the package and run the example files

1. Open the dashboard to any size
2. Shrink the window so that sidebar disappears
3. Zoom the window back to the original state

What is expected?

1. Unchanged sidebar
2. Items in dropdowns stay under dropdowns (when shrinked)

What is actually happening?

1. Sidebar now filled with links from navbar
2. Items in dropdowns scroll with the page (when shrinked)

---

Solution

Additional comments

[sabine33]

To solve this issue , open your light-bootstrap-dashboard.js file and replace following on line 60 ,
$(window).resize(function () {
if ($(window).width() <= 991) {
lbd.initRightMenu();
}
}
with following code,
// activate collapse right menu when the windows are resized
$(window).resize(function () {
if ($(window).width() <= 991) {
lbd.initRightMenu();
} else {
// reset all the additions that we made for the sidebar wrapper only if the screen is bigger than 991px
$sidebar_wrapper.find('.navbar-form').remove();
$sidebar_wrapper.find('.nav-mobile-menu').remove();
mobile_menu_initialized = false;
}
});

Reply to me whether it worked or not. Worked perfectly for me.

[alshoja]

nope the issue still exist

[Jeromesciortino]

To solve this issue , open your light-bootstrap-dashboard.js file and replace following on line 60 ,
$(window).resize(function () {
if ($(window).width() <= 991) {
lbd.initRightMenu();
}
}
with following code,
// activate collapse right menu when the windows are resized
$(window).resize(function () {
if ($(window).width() <= 991) {
lbd.initRightMenu();
} else {
// reset all the additions that we made for the sidebar wrapper only if the screen is bigger than 991px
$sidebar_wrapper.find('.navbar-form').remove();
$sidebar_wrapper.find('.nav-mobile-menu').remove();
mobile_menu_initialized = false;
}
});

Reply to me whether it worked or not. Worked perfectly for me.

Worked. Thanks