HTML
xxxxxxxxxx1
<!-- Navbar -->2
<nav class="navbar navbar-expand-lg navbar-dark special-color-dark">3
4
<!-- Navbar brand -->5
<a class="navbar-brand text-uppercase" href="#">Navbar</a>6
7
<!-- Collapse button -->8
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"9
aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">10
<span class="navbar-toggler-icon"></span>11
</button>12
13
<!-- Collapsible content -->14
<div class="collapse navbar-collapse" id="navbarSupportedContent2">15
16
<!-- Links -->17
<ul class="navbar-nav mr-auto">18
19
<!-- Features -->20
<li class="nav-item dropdown mega-dropdown active">21
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown"22
aria-haspopup="true" aria-expanded="false">Features23
<span class="sr-only">(current)</span>24
</a>25
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink2">26
<div class="row">27
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">28
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>29
<ul class="list-unstyled">30
<li>31
<a class="menu-item pl-0" href="#!">32
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet33
</a>34
</li>35
<li>36
<a class="menu-item pl-0" href="#!">37
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit38
</a>39
</li>40
<li>41
<a class="menu-item pl-0" href="#!">42
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt43
</a>44
</li>45
<li>46
<a class="menu-item pl-0" href="#!">47
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna48
</a>49
</li>50
<li>51
<a class="menu-item pl-0" href="#!">52
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam53
</a>54
</li>55
</ul>56
</div>57
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">58
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>59
<ul class="list-unstyled">60
<li>61
<a class="menu-item pl-0" href="#!">62
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation63
</a>64
</li>65
<li>66
<a class="menu-item pl-0" href="#!">67
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in68
</a>69
</li>70
<li>71
<a class="menu-item pl-0" href="#!">72
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat73
</a>74
</li>75
<li>76
<a class="menu-item pl-0" href="#!">77
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate78
</a>79
</li>80
<li>81
<a class="menu-item pl-0" href="#!">82
<i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur83
</a>84
</li>85
</ul>86
</div>87
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">88
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>89
<ul class="list-unstyled">90
<li>91
<a class="menu-item pl-0" href="#!">92
<i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat93
</a>94
</li>95
<li>96
<a class="menu-item pl-0" href="#!">97
<i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia98
</a>99
</li>100
<li>101
<a class="menu-item pl-0" href="#!">102
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error103
</a>104
</li>105
<li>106
<a class="menu-item pl-0" href="#!">107
<i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum108
</a>109
</li>110
<li>111
<a class="menu-item pl-0" href="#!">112
<i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium113
</a>114
</li>115
</ul>116
</div>117
<div class="col-md-6 col-xl-3 sub-menu mb-0">118
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>119
<ul class="list-unstyled">120
<li>121
<a class="menu-item pl-0" href="#!">122
<i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque123
</a>124
</li>125
<li>126
<a class="menu-item pl-0" href="#!">127
<i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun128
</a>129
</li>130
<li>131
<a class="menu-item pl-0" href="#!">132
<i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi133
architecto134
</a>135
</li>136
<li>137
<a class="menu-item pl-0" href="#!">138
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem139
</a>140
</li>141
<li>142
<a class="menu-item pl-0" href="#!">143
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est144
</a>145
</li>146
</ul>147
</div>148
</div>149
</div>150
</li>151
<!-- Technology -->152
<li class="nav-item dropdown mega-dropdown">153
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink3" data-toggle="dropdown"154
aria-haspopup="true" aria-expanded="false">Technology</a>155
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink3">156
<div class="row">157
<div class="col-md-12 col-xl-4 sub-menu mb-xl-0 mb-4">158
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>159
<!--Featured image-->160
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">161
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/8-col/img%20(37).jpg" class="img-fluid"162
alt="First sample image">163
<div class="mask rgba-white-slight"></div>164
</a>165
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>166
<p class="font-small text-uppercase white-text">167
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="far fa-comments px-1"168
aria-hidden="true"></i> 20169
</p>170
</div>171
<div class="col-md-6 col-xl-4 sub-menu mb-md-0 mb-4">172
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>173
<ul class="list-unstyled">174
<li>175
<a class="menu-item pl-0" href="#!">176
<i class="fas fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation177
</a>178
</li>179
<li>180
<a class="menu-item pl-0" href="#!">181
<i class="fas fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in182
</a>183
</li>184
<li>185
<a class="menu-item pl-0" href="#!">186
<i class="fas fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat187
</a>188
</li>189
<li>190
<a class="menu-item pl-0" href="#!">191
<i class="fas fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate192
</a>193
</li>194
<li>195
<a class="menu-item pl-0" href="#!">196
<i class="fas fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur197
</a>198
</li>199
</ul>200
</div>201
<div class="col-md-6 col-xl-4 sub-menu mb-0">202
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>203
<ul class="list-unstyled">204
<li>205
<a class="menu-item pl-0" href="#!">206
<i class="fas fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat207
</a>208
</li>209
<li>210
<a class="menu-item pl-0" href="#!">211
<i class="fas fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia212
</a>213
</li>214
<li>215
<a class="menu-item pl-0" href="#!">216
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error217
</a>218
</li>219
<li>220
<a class="menu-item pl-0" href="#!">221
<i class="fas fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum222
</a>223
</li>224
<li>225
<a class="menu-item pl-0" href="#!">226
<i class="fas fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium227
</a>228
</li>229
</ul>230
</div>231
</div>232
</div>233
</li>234
<!-- Lifestyle -->235
<li class="nav-item dropdown mega-dropdown">236
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink4" data-toggle="dropdown"237
aria-haspopup="true" aria-expanded="false">Lifestyle</a>238
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink4">239
<div class="row">240
<div class="col-md-6 col-xl-3 sub-menu mb-4">241
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>242
<ul class="list-unstyled">243
<li>244
<a class="menu-item pl-0" href="#!">245
<i class="fas fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet246
</a>247
</li>248
<li>249
<a class="menu-item pl-0" href="#!">250
<i class="fas fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit251
</a>252
</li>253
<li>254
<a class="menu-item pl-0" href="#!">255
<i class="fas fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt256
</a>257
</li>258
<li>259
<a class="menu-item pl-0" href="#!">260
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna261
</a>262
</li>263
<li>264
<a class="menu-item pl-0" href="#!">265
<i class="fas fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam266
</a>267
</li>268
</ul>269
</div>270
<div class="col-md-6 col-xl-3 sub-menu mb-4 mb-xl-0">271
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>272
<!--Featured image-->273
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">274
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg" class="img-fluid"275
alt="First sample image">276
<div class="mask rgba-white-slight"></div>277
</a>278
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>279
<p class="font-small text-uppercase white-text">280
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="far fa-comments px-1"281
aria-hidden="true"></i> 20282
</p>283
</div>284
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">285
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>286
<!--Featured image-->287
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">288
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).jpg" class="img-fluid"289
alt="First sample image">290
<div class="mask rgba-white-slight"></div>291
</a>292
<a class="news-title font-weight-bold pl-0" href="#!">Ut labore et dolore magna</a>293
<p class="font-small text-uppercase white-text">294
<i class="fas fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i class="far fa-comments px-1"295
aria-hidden="true"></i> 25296
</p>297
</div>298
<div class="col-md-6 col-xl-3 sub-menu mb-0">299
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>300
<ul class="list-unstyled">301
<li>302
<a class="menu-item pl-0" href="#!">303
<i class="fas fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque304
</a>305
</li>306
<li>307
<a class="menu-item pl-0" href="#!">308
<i class="fas fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun309
</a>310
</li>311
<li>312
<a class="menu-item pl-0" href="#!">313
<i class="fas fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi314
architecto315
</a>316
</li>317
<li>318
<a class="menu-item pl-0" href="#!">319
<i class="fas fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem320
</a>321
</li>322
<li>323
<a class="menu-item pl-0" href="#!">324
<i class="fas fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est325
</a>326
</li>327
</ul>328
</div>329
</div>330
</div>331
</li>332
333
</ul>334
<!-- Links -->335
336
<!-- Search form -->337
<form class="form-inline">338
<div class="md-form my-0">339
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">340
</div>341
</form>342
343
</div>344
<!-- Collapsible content -->345
346
</nav>347
<!-- Navbar -->CSS
1
1
JS
1
1
Console errors: 0