Topic: Double Navigation with fixed SideNav & fixed Navbar is not working
my left side nav css was not working then i use compiled.css, after this view was perfect of fixed navbar but now left sidenav is not opening. There is no response on click on nav button. error in console is-- <script type=\"text/javascript\">// SideNav Initialization $(\".button-collapse\").sidenav();---- (sidenav is not defined)</script> first of all why my view was not perfect before using compiled.css file, when i\'m using all files from zip that is downloaded. please suggest me which css and js files are required ?
<!DOCTYPE html><!DOCTYPE html><html lang="en" class="full-height">
<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"> <!-- Material Design Bootstrap --> <link href="css/compiled.css" rel="stylesheet"> <!-- Custom CSS--> <link href="css/style.css" rel="stylesheet">
<!-- Template styles --> <style> /* TEMPLATE STYLES */ .flex-center { color: #fff; } .navbar .btn-group .dropdown-menu a:hover { color: #000 !important; }
.navbar .btn-group .dropdown-menu a:active { color: #fff !important; }
</style>
</head>
<body class="fixed-sn light-blue-skin ">
<!--Double navigation--><header> <!-- Sidebar navigation --> <ul id="slide-out" class="side-nav sideNav 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-strong"></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 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> <!-- /.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-->
<!-- Main container--> <!--Footer--> <footer class="page-footer center-on-small-only elegant-color-dark">
<!--Footer Links--> <div class="container-fluid"> <div class="row">
<!--First column--> <div class="col-lg-3 col-md-6 ml-auto"> <h5 class="titles font-bold mt-3 mb-4">ABOUT MATERIAL DESIGN</h5> <p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p>
<p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p> </div> <!--/.First column-->
<hr class="w-100 clearfix d-sm-none">
<!--Second column--> <div class="col-lg-2 col-md-6 ml-auto"> <h5 class="title font-bold mt-3 mb-4">Our Projects</h5> <ul> <li><a href="#!">Jeffs Bike Shop</a></li> <li><a href="#!">Main Street Restaurant</a></li> <li><a href="#!">Connect Groceries</a></li> <li><a href="#!">White-To-Black Coffe Shop</a></li> </ul> </div> <!--/.Second column-->
<hr class="w-100 clearfix d-sm-none">
<!--Third column--> <div class="col-lg-2 col-md-6 ml-auto"> <h5 class="title font-bold mt-3 mb-4">Useful Resources</h5> <ul> <li><a href="#!">2016 Advertising Report</a></li> <li><a href="#!">Best NY Agencies</a></li> <li><a href="#!">Trends for 2017</a></li> <li><a href="#!">World Advertisement Report</a></li> </ul> </div> <!--/.Third column-->
<hr class="w-100 clearfix d-sm-none">
<!--Fourth column--> <div class="col-lg-2 col-md-6 ml-auto"> <h5 class="title font-bold mt-3 mb-4">Find us on</h5> <ul> <li><a href="#!">Facebook</a></li> <li><a href="#!">Twitter</a></li> <li><a href="#!">LinkedIn</a></li> <li><a href="#!">Behance</a></li> </ul> </div> <!--/.Fourth column-->
</div> </div> <!--/.Footer Links-->
<hr>
<!--Call to action--> <div class="call-to-action"> <h4 class="mb-5">Material Design for Bootstrap</h4> <ul> <li> <h5>Get our UI KIT for free</h5></li> <li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-info" rel="nofollow">Sign up!</a></li> <li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default" rel="nofollow">Learn more</a></li> </ul> </div> <!--/.Call to action-->
<!--Copyright--> <div class="footer-copyright"> <div class="container-fluid"> © 2015 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
</div> </div> <!--/.Copyright-->
</footer> <!--/.Footer-->
<!-- SCRIPTS -->
<!-- JQuery --> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap dropdown --> <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>
<script type="text/javascript"> // SideNav Options $('.button-collapse').sideNav({ edge: 'right', // Choose the horizontal origin closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor }); // Show sideNav $('.button-collapse').sideNav('show'); // Hide sideNav $('.button-collapse').sideNav('hide'); </script>
<!-- Animations init--> <script> new WOW().init(); </script>
</body>
</html>
<!---my left side nav in not working---->
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Bartłomiej Malanowski staff pro premium commented 7 years ago
What's your version of MDB?jpyadav commented 7 years ago
4.4.1Bartłomiej Malanowski staff pro premium commented 7 years ago
Do you use free or pro version?jpyadav commented 7 years ago
version - 4.4.1 my code is pasted belowBartłomiej Malanowski staff pro premium commented 7 years ago
Free/pro version?