xxxxxxxxxx1
<body class="fixed-sn mdb-skin">2
3
<!--Double navigation-->4
<header>5
<!-- Sidebar navigation -->6
<div id="slide-out" class="side-nav fixed wide sn-bg-1">7
<ul class="custom-scrollbar">8
<!-- Logo -->9
<li>10
<div class="logo-wrapper sn-ad-avatar-wrapper">11
<a href="#"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).webp" class="rounded-circle"><span>Anna Deynah</span></a>12
</div>13
</li>14
<!--/. Logo -->15
<!-- Side navigation links -->16
<li>17
<ul class="collapsible collapsible-accordion">18
<li><a class="collapsible-header waves-effect arrow-r active"><i class="sv-slim-icon fas fa-chevron-right"></i> Submit blog<i class="fas fa-angle-down rotate-icon"></i></a>19
<div class="collapsible-body">20
<ul>21
<li><a href="#" class="waves-effect active">22
<span class="sv-slim"> SL </span>23
<span class="sv-normal">Submit listing</span></a>24
</li>25
<li><a href="#" class="waves-effect">26
<span class="sv-slim"> RF </span>27
<span class="sv-normal">Registration form</span></a>28
</li>29
</ul>30
</div>31
</li>32
<li><a class="collapsible-header waves-effect arrow-r"><i class="sv-slim-icon far fa-hand-point-right"></i> Instruction<i class="fas fa-angle-down rotate-icon"></i></a>33
<div class="collapsible-body">34
<ul>35
<li><a href="#" class="waves-effect">36
<span class="sv-slim"> FB </span>37
<span class="sv-normal">For bloggers</span></a>38
</li>39
<li><a href="#" class="waves-effect">40
<span class="sv-slim"> FA </span>41
<span class="sv-normal">For authors</span></a>42
</li>43
</ul>44
</div>45
</li>46
<li><a class="collapsible-header waves-effect arrow-r"><i class="sv-slim-icon fas fa-eye"></i> About<i class="fas fa-angle-down rotate-icon"></i></a>47
<div class="collapsible-body">48
<ul>49
<li><a href="#" class="waves-effect">50
<span class="sv-slim"> I </span>51
<span class="sv-normal">Introduction</span></a>52
</li>53
<li><a href="#" class="waves-effect">54
<span class="sv-slim"> MM </span>55
<span class="sv-normal">Monthly meetings</span></a>56
</li>57
</ul>58
</div>59
</li>60
<li><a class="collapsible-header waves-effect arrow-r"><i class="sv-slim-icon far fa-envelope"></i> Contact me<i class="fas fa-angle-down rotate-icon"></i></a>61
<div class="collapsible-body">62
<ul>63
<li><a href="#" class="waves-effect">64
<span class="sv-slim"> F </span>65
<span class="sv-normal">FAQ</span></a>66
</li>67
<li><a href="#" class="waves-effect">68
<span class="sv-slim"> W </span>69
<span class="sv-normal">Write a message</span></a>70
</li>71
</ul>72
</div>73
</li>74
<li><a id="toggle" class="waves-effect"><i class="sv-slim-icon fas fa-angle-double-left"></i>Minimize menu</a>75
</li>76
</ul>77
</li>78
<!--/. Side navigation links -->79
</ul>80
<div class="sidenav-bg rgba-blue-strong"></div>81
</div>82
<!--/. Sidebar navigation -->83
<!-- Navbar -->84
<nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">85
<!-- SideNav slide-out button -->86
<div class="float-left">87
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fas fa-bars"></i></a>88
</div>89
<!-- Breadcrumb-->90
<div class="breadcrumb-dn mr-auto">91
<p>Material Design for Bootstrap</p>92
</div>93
<ul class="nav navbar-nav nav-flex-icons ml-auto">94
<li class="nav-item">95
<a class="nav-link"><i class="fas fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>96
</li>97
<li class="nav-item">98
<a class="nav-link"><i class="fas fa-comments"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>99
</li>100
<li class="nav-item">101
<a class="nav-link"><i class="fas fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a>102
</li>103
<li class="nav-item dropdown">104
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"105
aria-haspopup="true" aria-expanded="false">106
Dropdown107
</a>108
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">109
<a class="dropdown-item" href="#">Action</a>110
<a class="dropdown-item" href="#">Another action</a>111
<a class="dropdown-item" href="#">Something else here</a>112
</div>113
</li>114
</ul>115
</nav>116
<!-- /.Navbar -->117
</header>118
<!--/.Double navigation-->119
120
<!--Main Layout-->121
<main>122
<div class="container-fluid mt-5">123
<h2>Advanced Double Navigation with slim Side-nav nad fixed Navbar:</h2>124
<br>125
<h5>1. Fixed slim Side-nav, hidden on small devices.</h5>126
<h5>2. Fixed Navbar. It will always stay visible on the top, even when you scroll down.</h5>127
<div style="height: 2000px"></div>128
</div>129
</main>130
<!--Main Layout-->131
132
</body>xxxxxxxxxx1
.double-nav .breadcrumb-dn {2
color: #fff;3
}4
.side-nav.wide.slim .sn-ad-avatar-wrapper a span {5
display: none;6
}1
1
Console errors: 0