1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: SideNav not properly initialized

06chaynes pro asked 6 years ago

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>

06chaynes pro commented 6 years ago

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.

Mikołaj Smoleński staff commented 6 years ago

There should not be this div in sideNav, exactly as You noticed. Where did it come from? Is it in our documentation? Regards

06chaynes pro commented 6 years ago

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.

FREE CONSULTATION

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

Closed

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags
About author
06chaynes
Pro User 52Support score
5Questions 5Answers 0Snippets