FIxed sidnav example not working

Topic: FIxed sidnav example not working

billywinter pro asked 6 years ago

Using your example of the fixed sidenav and navbar, the sidenav disappears when the screen is collapsed but it does not come back using the 'hamburger' menu. I'm using the pro 4.5.12 version. Please help, thanks. 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>travels</title>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="css/mdb.min.css" rel="stylesheet">  <link href="css/style.css" rel="stylesheet"> </head> <body class="fixed-sn light-blue-skin">  <header>  <div id="slide-out" class="side-nav sn-bg-4 fixed"> <ul class="custom-scrollbar">  <li> <div class="logo-wrapper waves-light"> <a href="#"><img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a> </div> </li>   <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>   <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>   <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>  </ul> <div class="sidenav-bg mask-strong"></div> </div>   <nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg 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>  <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>  </header>   <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>    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>  <script type="text/javascript" src="js/popper.min.js"></script>  <script type="text/javascript" src="js/bootstrap.min.js"></script>  <script type="text/javascript" src="js/mdb.min.js"></script> $(".button-collapse").sideNav(); var sideNavScrollbar = document.querySelector('.custom-scrollbar'); Ps.initialize(sideNavScrollbar); </body> </html>

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

Hi, please, present your problem here: https://mdbootstrap.com/snippets/. Best, Marta

Add comment

billywinter pro answered 6 years ago

0 0 Best answer

this link is for snippets, how is that going to help my problem?

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

Hi, snippets are for placing your code and see live where is the problem. You can present me your problem and I can help you change your code to fix it. Best, Marta

Add comment

billywinter pro answered 6 years ago

0 0 Best answer

I already presented the code to you above (taken from your examples). Can you please run this code and see if it works for you?. Also, as a previous question was asked, what is premium support and how is it different from this forum? Thanks

Add comment

billywinter pro answered 6 years ago

0 0 Best answer

I created a snipped with the code, and it works fine there, however when I leave the java code on the html side, it doest. I think the java code is not being placed correctly or something may be wrong with that. What do you think?

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

Hi, About premium support you can read here: https://mdbootstrap.com/product/premium-support/. About sidenav - you don't have the sidenav initialization within <script></script> tags. You have to have your javascript code like here below:

<script>

$(".button-collapse").sideNav();
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);

</script>

MDB Snippets are for creating safety environment of MDB package and when you paste your code to the snippets we are sure that any code outside the MDB package doesn't broke your project. It is easier to diagnose the problem and help the user. Best, Marta

Add comment

billywinter pro answered 6 years ago

0 0 Best answer

That was it, thanks.

Add comment

billywinter pro answered 6 years ago

0 0 Best answer

That was it, thanks.

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

Hi, You're welcome.

Web Programming Unpas commented 6 years ago

still doesn't work .help

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

Hi Web Programming Unpas, please describe your problem in details - your version of MDB package, operating system, browser etc. and if it is needed, please create a snippet presenting the problem: https://mdbootstrap.com/snippets/. Then I can try to help you. Best, Marta

Add comment

Write

Create snippet

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: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: desktop pc
Browser: ie
OS: windows 10
Provided sample code: No
Provided link: No

billywinter

Pro User

230Support score
8Questions 19Answers

0Snippets likes 1Snippets