xxxxxxxxxx1
<body class="fixed-sn light-blue-skin">2
3
<!--Double navigation-->4
<header>5
<!-- Sidebar navigation -->6
<div id="slide-out" class="side-nav sn-bg-4 fixed">7
<ul class="custom-scrollbar">8
<!-- Logo -->9
<li>10
<div class="logo-wrapper waves-light">11
<a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>12
</div>13
</li>14
<!--/. Logo -->15
<!--Social-->16
<li>17
<ul class="social">18
<li><a href="#" class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>19
<li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>20
<li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>21
<li><a href="#" class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>22
</ul>23
</li>24
<!--/Social-->25
<!--Search Form-->26
<li>27
<form class="search-form" role="search">28
<div class="form-group md-form mt-0 pt-1 waves-light">29
<input type="text" class="form-control" placeholder="Search">30
</div>31
</form>32
</li>33
<!--/.Search Form-->34
<!-- Side navigation links -->35
<li>36
<ul class="collapsible collapsible-accordion">37
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i> Submit38
blog<i class="fas fa-angle-down rotate-icon"></i></a>39
<div class="collapsible-body">40
<ul>41
<li><a href="#" class="waves-effect">Submit listing</a>42
</li>43
<li><a href="#" class="waves-effect">Registration form</a>44
</li>45
</ul>46
</div>47
</li>48
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-hand-point-up"></i>49
Instruction<i class="fas fa-angle-down rotate-icon"></i></a>50
<div class="collapsible-body">51
<ul>52
<li><a href="#" class="waves-effect">For bloggers</a>53
</li>54
<li><a href="#" class="waves-effect">For authors</a>55
</li>56
</ul>57
</div>58
</li>59
<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>60
<div class="collapsible-body">61
<ul>62
<li><a href="#" class="waves-effect">Introduction</a>63
</li>64
<li><a href="#" class="waves-effect">Monthly meetings</a>65
</li>66
</ul>67
</div>68
</li>69
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-envelope"></i> Contact me<i70
class="fas fa-angle-down rotate-icon"></i></a>71
<div class="collapsible-body">72
<ul>73
<li><a href="#" class="waves-effect">FAQ</a>74
</li>75
<li><a href="#" class="waves-effect">Write a message</a>76
</li>77
<li><a href="#" class="waves-effect">FAQ</a>78
</li>79
<li><a href="#" class="waves-effect">Write a message</a>80
</li>81
<li><a href="#" class="waves-effect">FAQ</a>82
</li>83
<li><a href="#" class="waves-effect">Write a message</a>84
</li>85
<li><a href="#" class="waves-effect">FAQ</a>86
</li>87
<li><a href="#" class="waves-effect">Write a message</a>88
</li>89
</ul>90
</div>91
</li>92
</ul>93
</li>94
<!--/. Side navigation links -->95
</ul>96
<div class="sidenav-bg mask-strong"></div>97
</div>98
<!--/. Sidebar navigation -->99
<!-- Navbar -->100
<nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">101
<!-- SideNav slide-out button -->102
<div class="float-left">103
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fas fa-bars"></i></a>104
</div>105
<!-- Breadcrumb-->106
<div class="breadcrumb-dn mr-auto">107
<p>Material Design for Bootstrap</p>108
</div>109
<ul class="nav navbar-nav nav-flex-icons ml-auto">110
<li class="nav-item">111
<a class="nav-link"><i class="fas fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>112
</li>113
<li class="nav-item">114
<a class="nav-link"><i class="far fa-comments"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>115
</li>116
<li class="nav-item">117
<a class="nav-link"><i class="fas fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a>118
</li>119
<li class="nav-item dropdown">120
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"121
aria-haspopup="true" aria-expanded="false">122
Dropdown123
</a>124
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">125
<a class="dropdown-item" href="#">Action</a>126
<a class="dropdown-item" href="#">Another action</a>127
<a class="dropdown-item" href="#">Something else here</a>128
</div>129
</li>130
</ul>131
</nav>132
<!-- /.Navbar -->133
</header>134
<!--/.Double navigation-->135
136
<!--Main Layout-->137
<main>138
<div class="container-fluid mt-5">139
<h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2>140
<br>141
<h5>1. Fixed side menu, hidden on small devices.</h5>142
<h5>2. Fixed Navbar. It will always stay visible on the top, even when you scroll down.</h5>143
<div style="height: 2000px"></div>144
</div>145
</main>146
<!--Main Layout-->147
148
</body>xxxxxxxxxx1
/* Only for snippet */2
.double-nav .breadcrumb-dn {3
color: #fff;4
}5
6
@media (min-width: 1400px){7
nav.navbar {8
padding-left: 240px !important;9
}10
}11
12
xxxxxxxxxx1
$(document).ready(function() {2
3
// SideNav Initializationa4
$(".button-collapse").sideNav();5
});6
Console errors: 0