SideNav not properly initialized
06chaynes Pro User asked 3 months ago in MDB pro, version:4.4
I am having a strange issue regarding the side navigation where the top half seems to be in a disabled state. By this I mean everything above the navigation links area is not clickable and appears to be greyed out (as if disabled). Here is a link to an image of the issue: https://i.imgur.com/RnrwqEZ.png I have posted the page source below for review. It’s also worth noting that I am calling:
$(“.button-collapse”).sideNav();
I am not receiving any errors in the console after initialization. Here is the page source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="http://localhost:8080/css/app.css" rel="stylesheet">
</head>
<body class="fixed-sn mdb-skin">
<div id="app">
<header>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav fixed sn-bg-1 custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light">
<a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
</div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ul class="social">
<li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
<li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Submit listing</a>
</li>
<li><a href="#" class="waves-effect">Registration form</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">For bloggers</a>
</li>
<li><a href="#" class="waves-effect">For authors</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Introduction</a>
</li>
<li><a href="#" class="waves-effect">Monthly meetings</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact me<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
<div class="sidenav-bg mask-slight"></div>
</ul>
<!--/. Sidebar navigation -->
<!-- Navbar -->
<nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p>Material Design for Bootstrap</p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a class="nav-link"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
</header>
<main>
<div class="container-fluid text-center">
<!--Card-->
<div class="card card-cascade wider reverse my-4 pb-5">
<!--Card image-->
<div class="view overlay hm-white-slight wow fadeIn">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(52).jpg" class="img-fluid">
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--/Card image-->
<!--Card content-->
<div class="card-body text-center wow fadeIn" data-wow-delay="0.2s">
<!--Title-->
<h4 class="card-title"><strong>My adventure</strong></h4>
<h5 class="blue-text"><strong>Photography</strong></h5>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
</p>
<a class="btn btn-primary btn-lg">Primary button</a>
<a class="btn btn-secondary btn-lg">Secondary button</a>
<a class="btn btn-default btn-lg">Default button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
</main>
<footer class="page-footer center-on-small-only">
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2017 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
</div>
<script src="http://localhost:8080/js/app.js"></script>
<script src="http://localhost:8080/js/mdb.js"></script>
<script type="text/javascript">
$(".button-collapse").sideNav();
var el = document.querySelector('.custom-scrollbar');
Ps.initialize(el);
new WOW().init();
</script>
<script src="https://www.google.com/recaptcha/api.js?" async defer></script>
</body>
</html>
Please login or Register to submit your answer
I do believe I pulled this from an example page’s source. I will try to look later to see if I can find which example it came from.
There should not be this div in sideNav, exactly as You noticed. Where did it come from? Is it in our documentation?
Regards
Strangely enough I was able to resolve this by removing the line:
<pre><div class="sidenav-bg mask-slight"></div></pre>
Something about the sidenav-bg class was breaking functionality. I will try to look further into the cause but if you have any ideas I'm all ears.