Just downloaded mdbpro and tried using the sidebar templates. Everything works except the menu items don't expand and drop down. What could be causing this?
As I can see, you placed your javascript section too high. Please move your js scripts to the end of the <body>
tag
Am I supposed to comment or use the post here? My version is 4.5.12.
Am I supposed to comment or use the post here? My version is 4.5.12.
Please insert min. 20 characters.
Post
Am I supposed to comment or use the post here? My version is 4.5.12.
Here is the code:
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><!DOCTYPE html>
<html lang="en">
<head>
<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">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
// SideNav Button Initialization
$(".button-collapse").sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
</head>
<body class="fixed-sn black-skin">
<!--Double navigation-->
<header>
<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav sn-bg-4 fixed">
<ul class="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 href="#" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li><a href="#" class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
<li><a href="#" class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li><a href="#" 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 md-form mt-0 pt-1 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>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<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 -->
</ul>
<div class="sidenav-bg mask-strong"></div>
</div>
<!--/. 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 dropdown-menu-right" 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>
<!-- /.Navbar -->
</header>
<!--/.Double navigation-->
<!--Main Layout-->
<main>
<div class="container-fluid mt-5">
<h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2>
<br>
<h5>1. Fixed side menu, hidden on small devices.</h5>
<h5>2. Fixed Navbar. It will always stay visible on the top, even when you scroll down.</h5>
<div style="height: 2000px"></div>
</div>
</main>
<!--Main Layout-->
</body>
</html></pre>
Here is the code:
<head>
<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" >
<title> Material Design Bootstrap </title>
<!-- Font Awesome -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
<!-- Bootstrap core CSS -->
<link href = "css/bootstrap.min.css" rel = "stylesheet" >
<!-- Material Design Bootstrap -->
<link href = "css/mdb.min.css" rel = "stylesheet" >
<!-- Your custom styles (optional) -->
<link href = "css/style.css" rel = "stylesheet" >
<!-- SCRIPTS -->
<!-- JQuery -->
<script type = "text/javascript" src = "js/jquery-3.3.1.min.js" ></script>
<!-- Bootstrap tooltips -->
<script type = "text/javascript" src = "js/popper.min.js" ></script>
<!-- Bootstrap core JavaScript -->
<script type = "text/javascript" src = "js/bootstrap.min.js" ></script>
<!-- MDB core JavaScript -->
<script type = "text/javascript" src = "js/mdb.min.js" ></script>
// SideNav Button Initialization
$(".button-collapse").sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
</head>
<body class = "fixed-sn black-skin" >
<!--Double navigation-->
<header>
<!-- Sidebar navigation -->
<div id = "slide-out" class = "side-nav sn-bg-4 fixed" >
<ul class = "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 href = "#" class = "icons-sm fb-ic" ><i class = "fa fa-facebook" > </i></a></li>
<li><a href = "#" class = "icons-sm pin-ic" ><i class = "fa fa-pinterest" > </i></a></li>
<li><a href = "#" class = "icons-sm gplus-ic" ><i class = "fa fa-google-plus" > </i></a></li>
<li><a href = "#" 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 md-form mt-0 pt-1 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>
<li><a href = "#" class = "waves-effect" > FAQ </a>
</li>
<li><a href = "#" class = "waves-effect" > Write a message </a>
</li>
<li><a href = "#" class = "waves-effect" > FAQ </a>
</li>
<li><a href = "#" class = "waves-effect" > Write a message </a>
</li>
<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 -->
</ul>
<div class = "sidenav-bg mask-strong" ></div>
</div>
<!--/. 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 dropdown-menu-right" 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>
<!-- /.Navbar -->
</header>
<!--/.Double navigation-->
<!--Main Layout-->
<main>
<div class = "container-fluid mt-5" >
<h2> Advanced Double Navigation with fixed SideNav & fixed Navbar: </h2>
<h5> 1. Fixed side menu, hidden on small devices. </h5>
<h5> 2. Fixed Navbar. It will always stay visible on the top, even when you scroll down. </h5>
<div style = " height : 2000px " ></div>
</div>
</main>
<!--Main Layout-->
</body>
</html>
Please insert min. 20 characters.
Post
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
// SideNav Button Initialization
$(".button-collapse").sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
</head>
<body class="fixed-sn black-skin">
<!--Double navigation-->
<header>
<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav sn-bg-4 fixed">
<ul class="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 href="#" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li><a href="#" class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
<li><a href="#" class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li><a href="#" 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 md-form mt-0 pt-1 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>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<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 -->
</ul>
<div class="sidenav-bg mask-strong"></div>
</div>
<!--/. 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 dropdown-menu-right" 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>
<!-- /.Navbar -->
</header>
<!--/.Double navigation-->
<!--Main Layout-->
<main>
<div class="container-fluid mt-5">
<h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2>
<br>
<h5>1. Fixed side menu, hidden on small devices.</h5>
<h5>2. Fixed Navbar. It will always stay visible on the top, even when you scroll down.</h5>
<div style="height: 2000px"></div>
</div>
</main>
<!--Main Layout-->
</body>
</html>
Bartłomiej Malanowski staff commented 6 years ago
Do you have any console logs? Could you please show us your code? I recommend you to try our MDB Snippets to do that. Here you can do it: https://mdbootstrap.com/snippetsbillywinter pro commented 6 years ago
Thanks, I also tried the sidenav example in snippets and had the same issue where the sub-menu items do not expand.billywinter pro commented 6 years ago
I bought the pro version specifically for the sidenav. I was able to get this type to work:billywinter pro commented 6 years ago
I bought the pro version specifically for the sidenav. I was able to get this type to work: