Topic: Width checking issue in sidebar navigation

hockchuan free asked 6 years ago

        $(window).resize(function () {
            window.innerWidth = $(window).width();
When viewing the page with certain width (width between 1425p and 1440x), the sidebar navigation will disappear. I suppose 15px is scrollbar width. Can help to update mdb.min.js to take vertical scrollbar into account? Thanks.

Adrian Sawicki free answered 6 years ago

Thanks for showing this issue in so good manner. I've added this to our bugs list and I hope we will fix it asap.

hockchuan free answered 6 years ago

There's a bug where the navigation sidebar will disappear exactly between 1440 and 1455 pixels in width. It's due to width calculation being different in Javascript and media query. Album of images to view the display issues. To simulate the issue, here's the whole html page.

<!DOCTYPE html>
<html lang="en">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="">
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../css/mdb.min.css" rel="stylesheet">

<body class="fixed-sn mdb-skin">

        <ul id="slide-out" class="side-nav fixed sn-bg-1 custom-scrollbar">
                <ul class="collapsible collapsible-accordion"></ul>
            <div class="sidenav-bg mask-strong"></div>
        <nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar double-nav">
            <div class="float-left">
                <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
        <div class="container-fluid">
		    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../../../js/tether.min.js"></script>
    <script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../../js/mdb.min.js"></script>

        var el = document.querySelector('.custom-scrollbar');

        new WOW().init();

        $(document).ready(function () {

        $(window).resize(function () {
            window.innerWidth = $(window).width();

Adrian Sawicki free answered 6 years ago

Hello, First of all, what would you like to create? What do you mean by disappear? From what I see navigation(navbar + scrollbar) works properly. At some lower resolution sidebar is hidden and there is a button to activate it.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No