Topic: Fix sidenav on large screens not working
Hi,
First off, I purchased a Pro MDB4 version and love the product. So far is great and easy to use. Definitely much simpler to setup and use than most other themes out there! =)
So, I am trying to setup a double nav with fixed sidebar and fixed navbar exactly like the following from your layouts page https://mdbootstrap.com/css/page-layouts/ -> DOUBLE NAVIGATION WITH FIXED SIDENAV & FIXED NAVBAR (one thing to note is that on the page the image shows the correct layout, but when you click on the live preview button, it shows with the sidenav collapsed when the page loads and you have to click the toggle button to see the menu, but even then shows as a hover menu and not fixed).
Is this a known issue, or has this functionality been removed? I am trying to setup my site exactly like the layout DOUBLE NAVIGATION WITH FIXED SIDENAV & FIXED NAVBAR. But no matter what I try the sidenav is collapsed by default on large screens. On small screens this is what I want, just not on large screens. Not sure what else to try since even on your examples it is not working.
FYI - I am using the bootstrap 4 version.
Thanks!
Add comment
Double Navigation with a hidden SideNav & fixed Navbar not showing on full screen
<ul class="custom-scrollbar list-unstyled" style="max-height:100vh;">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light waves-effect waves-light">
<a href="#"><img src="image/logo.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="fab fa-facebook-f"> </i></a></li>
<li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
<li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>
<li><a href="#" class="icons-sm tw-ic"><i class="fab 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 waves-effect 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="fas fa-chevron-right"></i> Submit blog<i class="fas 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="far fa-hand-pointer"></i> Instruction<i class="fas 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="fas fa-eye"></i> About<i class="fas 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="far fa-envelope"></i> Contact me<i class="fas 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 peach-gradient double-nav">
<!-- SideNav slide-out button -->
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fas fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p><a href="#"><img src="image/logo.png" height="40px"></a></p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fas fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="far fa-comments"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fas fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a>
</li>
</ul>
</nav>
<!-- /.Navbar -->
</header>
<!--/.Double navigation-->
Marcin Luczak staff commented 4 years ago
Hi, I can see that the code you provided lacks some HTML elements which causes it to corrupt. Please provide your code showing your problem using snippets: https://mdbootstrap.com/snippets/. Regards, Marcin
had same issue.... did a work around like this
style.css
@media only screen and (min-width: 1025px){ //wanted it to show for screens above 1024
.side-nav.fixed {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@media (min-width: 1025px) {
.fixed-sn .double-nav,
.fixed-sn footer {
padding-left: 240px;
}
}
@media (min-width: 1025px) {
.double-nav .button-collapse {
display: none;
}
}
@media (max-width: 1025px) {
.double-nav .button-collapse {
display: block ;
position: relative;
font-size: 1.4rem;
margin-right: 10px ;
margin-left: 10px ;
}
}
then for the javascript
$(window).bind('load resize', function(){
if (window.innerWidth <= 1024) {
$(".button-collapse").sideNav();
}
});
hope this helps as aginst editing the main file
Hi,
your custom CSS styles make problem with correct display of sidenav on small devices. When I removed them it's ok. Now we're doing new update of MDB, so I'll check how to easily change this sidenav breakpoint, because now I see it's quite hard to change this.
Best,
Marta
Pelias2525 pro commented 7 years ago
Any updates on a simple way to change the sidenav breakpoint? I'd like it to collapse at SM instead of MD.
The files are all at this link: https://webapps.rrdsb.com/SH2Prototype
You'll see that the nav works if you're LG or XL, but if you're smaller, the sidenav doesn't size properly and all we see is the sidenav-bg
Hi cdenby,
if you still need help, could you send me here: m.szymanska@mdbootstrap.com these files which links you pasted above? I'll look at this. And tell me what exactly version of MDB do you have, please.
Best,
Marta
Sorry, no, I haven't tried changing the breakpoint in my code. I'm okay with it at 1440px. But that
$sidenav-breakpoint variable is only used in one place, 7 lines below where it is declared in _variables.scss:
$hide-sidenav: "only screen and (max-width : #{$sidenav-breakpoint})" !default;
In turn, $hide-sidenav is only used once on line 402 in /sass/mdb/pro/_side-nav.scss:
// Fixed sideNav hide on smaller
@media #{$hide-sidenav} {
.side-nav.fixed {
transform: translateX(-105%);
&.right-aligned {
transform: translateX(105%);
}
}
}1440px only comes up with a few hits, mostly in sass/mdb/pro/_navbars-pro.scss. So, if changing that variable doesn't fix it, unfortunately I don't know what to tell you. Since you have sass setup now, maybe one of the MDB developers can tell you what else needs to be changed. It should be much easier, and less error prone, working with the sass vs. css.
I brought in the sass middleware to my project, confirmed that it's compiling all the .scss into mdb.css and have tried the change you suggested but my sidebar is still collapsing at 1440px.
Were you able to get it to work within your project when changing that variable?
Thanks,
J
Have you tried changing the SASS instead of the CSS? I think that would be easier.
In
sass/mdb/free/data/_variables.scss on line 33 there is:
$sidenav-breakpoint: 1440px !default;
Change that to the value you want and then recompile the SASS to CSS. If you don't know how to use SASS:
http://sass-lang.com/guide
It's not hard and it typically makes bigger changes like this much simpler.
It's more than the one section of the CSS that has to be adjusted.
Here's what I changed and it seemed to work, except that I had to put !important on them all. Then that kills the slide-out when you're in small mode because the !important overrides the additional element rule for transformX.
But it got most of the way there:
/*Changing the breakpoint for the Side Nav to match LG instead of 1440*/
.side-nav.fixed {
left: 0;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
position: fixed; }
.side-nav.fixed.right-aligned {
right: 0;
left: auto; }
/*@media only screen and (max-width: 1440px) { -- Changed by CDenby to below */
@media only screen and (max-width: 992px) { /*This matches Large Screens and Extra Large Screens*/
.XXside-nav.fixed {
-webkit-transform: translateX(-105%);
-ms-transform: translateX(-105%);
transform: translateX(-105%); }
.XXside-nav.fixed.right-aligned {
-webkit-transform: translateX(105%);
-ms-transform: translateX(105%);
transform: translateX(105%); }
}
@media only screen and (min-width: 992px) {
.XXdouble-nav .XXbutton-collapse {
display: none; } }
@media (min-width: 992px) {
.XXnavbar .XXbutton-collapse {
display: none; } }
@media (max-width: 992px) {
.XXnavbar .XXbutton-collapse {
display: block;
position: relative;
font-size: 1.4rem;
margin-top: 2px;
margin-right: 10px;
margin-left: 10px; } }
@media (max-width: 992px) {
.XXfixed-sn .XXdouble-nav,
.XXfixed-sn XXmain,
.XXfixed-sn XXfooter {
padding-left: 0; } }
@media (min-width: 993px) {
.XXfixed-sn .XXdouble-nav,
.XXfixed-sn XXmain,
.XXfixed-sn XXfooter {
padding-left: 240px; } }
Unfortunately, searching for .side-nav.fixed brings up the following and changing from 1440px to a lower resolution does not stop it from breaking at 1440.
`
.side-nav.fixed
{
left: 0;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
position: fixed;
}
.side-nav.fixed.right-aligned {
right: 0;
left: auto;
}
@media only screen and (max-width: 1440px) {
.side-nav.fixed {
-webkit-transform: translateX(-105%);
-ms-transform: translateX(-105%);
transform: translateX(-105%);
}
.side-nav.fixed.right-aligned {
-webkit-transform: translateX(105%);
-ms-transform: translateX(105%);
transform: translateX(105%);
}
}
I've been trying to figure out why the left sidebar breakpoints for navbar-toggleable-sm, navbar-toggleable-md have not been working in the double navigation menu templates provided with the Pro 4.3 purchase and now find that it's hard coded to only collapse at 1440px.
Wouldn't it make sense to document this somewhere as I would expect that in a navbar (even if it's part of the double nav) that the navbar-toggleable-sm or navbar-toggleable-md should do as bootstrap intended with using the pre-defined breakpoints.
Can you give clear instructions on how to adjust the breakpoint for sidenavs and sidenavs in double-navs? I've been adding css code to my own file and I get closer to making it work, but the best I've gotten to is having everything work fine along with the breadcrumb, but on smaller screens, the button no longer opens the sidenav because of all the !important flags I've had to put in to the transform rules.
Can you help me with this?
This is the version with my adjustments in styles.css:
https://webapps.rrdsb.com/sh2prototype
This is the version without the adjustments:
https://webapps.rrdsb.com/sh2prototype/index2.aspx
Hi,
Breakpoint size for left sidenav is 1440px. If you want to change this, you can do this in your custom CSS file by overwriting MDB.css code. In MDB.css search this classes
.side-nav.fixed and you can overwrite settings which are there by your custom code, and then you will change breakpoint for smaller one.
Best,
Marta
Thanks for you feedback p.wood. So your right, it has to do with that. Sorry for the confusion, as I did not think of that because normally within bootstrap large breakpoints work fine on my screen.
If I put my browser zoom down to 90% then it starts working. Seems weird though as my screens size is 1439x776 normally. What is the breakpoint size for the left sidenav? Additionally if I wanted to change that can you please point me to an example that I can use? Basically I would like the breakpoint to be a bit smaller.
Thanks
The above code works for me...
.... and so does the example link. I have just realised my mistake.
I have been developing on a Surface Pro 3 with the display setting set to 125% - putting this back to 100% has fixed the issue. I guess the 125% setting confused the browser / OS / Whatever into thinking that the display resolution wasn't large enough to trigger the side menu.
Not sure if this can be compensated for in code or not... but at least it is now working as intended. The joys of modern web development :)
EDIT: Just to be clear: this was the resolution setting of the OS (Windows 10), not the broswer zoom setting.
Right-Click On Desktop -> Display Settings -> Change the size of Text Apps and Other Items -> 100%
Try this code - it works. Before trying to extract a new MDB Pro 4.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.6.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">
</head>
<body class="fixed-sn mdb-skin">
<!--Double navigation-->
<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="http://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-dark scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-xs-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>Breadcrumb or page title</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="hidden-sm-down">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-user"></i> <span class="hidden-sm-down">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">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit:</h2>
<br>
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum dicta nam inventore.</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum dicta nam inventore, in est ipsum provident ratione sint sed unde voluptate illo beatae recusandae dolores, dolorem. Nam voluptate, error! Cupiditate!</p>
<div style="height: 2000px"></div>
</div>
</main>
<!--/Main layout-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.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>
$(".button-collapse").sideNav();
</script>
</body>
</html>
Hey,
Have you guys been able to re-create the issue? Please let me know if the sample project I sent has the issue for you.
Thanks
Hi there,
I am having the same problem.
The example page at https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/side-nav-fixed-navbar-fixed.html doesn't seem to work either - The Side Nav Bar isn't fixed on this example page and will only open when the menu button is pressed.
Thank you for your response. I am using MDB Pro 4.3. I just recently purchased the 4.3 version. I tried the code she posted, but nothing changes. I also tried pasting code from your documentation (https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/side-nav-fixed-navbar-fixed.html) with no luck.
I sent a sample app containing the issue I am describing and sent it to Marta(m.szymanska@mdbootstrap.com). Please take a look and let me know what I am missing. I am expecting to see a left sidebar expanded when the page loads on large devices, and when the page loads on a small device, the left side menu is hidden, and expandable.
Please take a look and let me know what I need to change.
Thank you
Hi tkueny,
as standard it works with us so as you described in your post No. #13908. Could your share me your live preview website? Do you pasted the code that has shared Marta in version MDB Pro 4.3?
Regards
Also, just to clarify what I am trying to do. I am trying to make the left sidebar not collapsed on large devices, meaning its pushed out and always visible when the page is loaded. Only when the device has a small screen should the left sidebar be hidden and toggle-able.
Does this make sense?
Thanks
Thank you for your response. I tried using your html, but with no luck. Just to clarify, for your example, are you referring to the javascript at the bottom ($(".button-collapse").sideNav(); etc...) as being the issue for me? If so, I have this contained in app.js (referenced in my example I posted above).
Im not sure this is an issue with my code as the actual examples from your website do not work for the fixed sidenav and top nav. For example, this link (https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/side-nav-fixed-navbar-fixed.html) supposedly has fixed sidenav, and fixed top nav, but does not actually have it when you load the page. am I missing something?
Again, thank you for your time. We really need to resolve this as soon as possible as we are exploring possible alternatives.
Thank you
Hello,
In code you pasted here is a few mistakes. Look at the code below and then look carefully at your code and then you will see these mistakes and you will know what you did wrong. Below is correct code of double navigation:
<!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.6.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">
</head>
<body class="fixed-sn white-skin">
<!--Double navigation-->
<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="http://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-dark scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-xs-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">
Breadcrumb or page title
</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="hidden-sm-down">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-user"></i> <span class="hidden-sm-down">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">
<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>
<strong>Note: </strong>To make your Navbar fixed on large screens and non-fixed on mobile, add <code>.mobile-nofixed</code> class to your Navbar
<div style="height: 2000px"></div>
</div>
</main>
<!--/Main layout-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid text-center">
<div class="row">
<!--First column-->
<div class="col-md-12">
<h5 class="title">Footer Content</h5>
Here you can use rows and columns here to organize your footer content.
</div>
<!--/.First column-->
</div>
</div>
<!--/.Footer Links-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2017 Copyright: <a href="https://www.google.net"> Test</a>
</div>
</div>
<!--/.Copyright-->
</footer>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.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>
// SideNav init
$(".button-collapse").sideNav();
// Custom scrollbar init
var el = document.querySelector('.custom-scrollbar');
Ps.initialize(el);
</script>
</body>
</html>Mohammad Amir free commented 5 years ago
bvnvnbvn cbcvbc fdghfdg
Marta Wierzbicka staff commented 5 years ago
Do you need any help?
Thank you for you reply.
My example is code pulled directly from that link you provided on mdb4 pro (4.3.0). The below example is from the latest documentation, and is working mostly, except the fixed sidenav.
The example from the 4.2.0 legacy page did not work at all. The top menu was pushed down, and the side menu was not loading.
Please help me to understand what I am doing wrong. Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/css/font-awesome.css" />
<link rel="stylesheet" href="~/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/mdb.css" />
</head>
<body class="fixed-sn white-skin">
<!--Double navigation-->
<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="http://mdbootstrap.com/img/logo/mdb-transparent.png" /></a>
</div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ul class="social">
<li><a><i class="fa fa-facebook"> </i></a></li>
<li><a><i class="fa fa-pinterest"> </i></a></li>
<li><a><i class="fa fa-google-plus"> </i></a></li>
<li><a><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><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="#">Submit listing</a>
</li>
<li>
<a href="#">Registration form</a>
</li>
</ul>
</div>
</li>
<li>
<a><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="#">For bloggers</a>
</li>
<li>
<a href="#">For authors</a>
</li>
</ul>
</div>
</li>
<li>
<a><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="#">Introduction</a>
</li>
<li>
<a href="#">Monthly meetings</a>
</li>
</ul>
</div>
</li>
<li>
<a><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="#">FAQ</a>
</li>
<li>
<a href="#">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-dark scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-xs-left">
<a href="#"><i class="fa fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p>Breadcrumb or page title</p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
</li>
<li class="nav-item">
<a><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
</li>
<li class="nav-item">
<a><i class="fa fa-user"></i> <span class="hidden-sm-down">Account</span></a>
</li>
<li class="nav-item dropdown">
<a href="#">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
<!-- /.Navbar -->
</header>
<!--/.Double navigation-->
<!--Main layout-->
<main>
<div class="container-fluid">
<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>
<p><strong>Note: </strong>To make your Navbar fixed on large screens and non-fixed on mobile, add <code>.mobile-nofixed</code> class to your Navbar</p>
<div style="height: 2000px">
</div>
</div>
</main>
<!--/Main layout-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid text-center">
<div class="row">
<!--First column-->
<div class="col-md-12">
<h5 class="title">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!--/.First column-->
</div>
</div>
<!--/.Footer Links-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2017 Copyright: <a href="https://www.google.net"> Test</a>
</div>
</div>
<!--/.Copyright-->
</footer>
<script src="~/js/jquery-3.1.1.js"></script>
<script src="~/js/tether.js"></script>
<script src="~/js/bootstrap.js"></script>
<script src="~/js/mdb.js"></script>
</body>
</html>
Hi,
You're using MDB 4.3.0 now, right? And when you copy the code from documentation: https://mdbootstrap.com/css/page-layouts/#f-s-f-n and it doesn't work correctly in your project? If yes, please send me some files with sample of your code to m.szymanska@mdbootstrap.com and I will help you.
Best,
Marta
Thank you for getting back to me. Much appreciated!
So do I need to download the 4.2.0 version, and reference that? I tried to copy and paste the example from the 4.2.0 layout example but it caused my navbar to be pushed to the bottom of the page, and the sidenav does not look to be correctly loading.
I am currently using version 4.3.0 Pro.
Thanks
Hello,
we updated MDB 4.2.0 to MDB 4.3.0, so documentation is also new, please look at documentation of MDB 4.2.0: https://mdbootstrap.com/legacy/4.2.0/css/page-layouts and then copy the code of double navigation - fixed navbar & fixed sidenav and it will work.
Best,
Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No