Description
Modern Admin provides flexible navbar component, which allows you to modify navbar colors, appearance of different types of content, components placement etc. This page contain all navbar styling options.
All this functionality is available by setting proper classes to the navbar components and navbar itself. Below table contain all available classes that can be used with the navbar:
| Classes | Description |
|---|---|
.fixed-top |
To set navbar fixed at top you need to add .fixed-top class in navbar
<nav> tag. For more information please check fixed-top.html. |
.fixed-bottom |
To set navbar fixed at bottom you need to add .fixed-bottom class in
navbar <nav> tag. |
.navbar-static-top |
Create a full-width navbar that scrolls away with the page by adding .navbar-static-top.
Unlike the .navbar-fixed-* classes, you do not need to change any
padding on the body. |
.navbar-brand-center |
This class allow you to set navbar branding portion at center. Add .navbar-brand-center
class in navbar <nav> tag. For more information please check navbar-brand-center.html.
This is optional class. |
.navbar-light |
To set navbar light color you need to add .navbar-light class in
navbar <nav> tag. For more information please check navbar-light.html |
.navbar-dark |
To set navbar dark color you need to add .navbar-dark class in navbar
<nav> tag. For more information please check navbar-dark.html |
.navbar-semi-dark |
To set navbar semi dark color you need to add .navbar-semi-dark class
in navbar <nav> tag. For more information please check navbar-semi-dark.html |
.navbar-border |
You can add navbar border bottom by adding .navbar-border class in
navbar <nav> tag. This navbar class is optional. |
.navbar-shadow |
You can also apply navbar shadow bottom by adding .navbar-shadow class
in navbar <nav> tag. This navbar class is optional. |
.disabled |
To disabled navbar menu item link, you need to add .disabled class in
navigation
<li> tag. This navigation class is optional. Fore more
information please check vertical-disabled-navigation-link.html |
This section contains HTML Markup to demonstrate navbar styling options. This markup define where to add css classes to customize navbar as per your requirements.
- Line no 7 (Navbar position options): Contain the
.fixed-topclass for adjusting navbar fixed on top, here you can use any one class from.fixed-top,.fixed-bottom&.navbar-static-topas per your navbar position requirement. - Line no 7 (Navbar color options): Contain the
.navbar-darkclass for adjusting navbar color dark, here you can use any one class from.navbar-dark,.navbar-light&.navbar-semi-darkas per your navbar color requirement. You can also use custom colors i.e blue, red, cyan etc.. from Modern Admin color palettes, for more information of custom navbar color usage please refer navbar-light.html, navbar-dark.html & navbar-semi-dark.html - Line no 7: If you want to set navbar branding at center you
can add
.navbar-brand-centerclass to this line, its optional class. - Line no 7: Also contain the
.navbar-border&.navbar-shadowclasses that can be use together and both are the optional.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body data-menu="vertical-menu" class="vertical-layout vertical-menu 2-column menu-expanded">
<!-- fixed-top-->
<nav role="navigation" class="navbar header-navbar navbar-with-menu fixed-top navbar-dark navbar-shadow navbar-border">
...
</nav>
<!-- BEGIN Navigation-->
<div class="main-menu menu-dark menu-shadow">
...
</div>
<!-- END Navigation-->
<!-- BEGIN Content-->
<div class="content app-content">
<div class="content-wrapper">
<!-- content header-->
<div class="content-header row">
...
</div>
<!-- content header-->
<!-- content right-->
<div class="content-right">
...
</div>
<!-- content right-->
</div>
</div>
<!-- END Content-->
<!-- START FOOTER DARK-->
<footer class="footer footer-dark">
...
</footer>
<!-- START FOOTER DARK-->
</body>
</html>