Description
The navbar brand center navbar option has center aligned brand in navbar. This option can be use with any color and type of navbar i.e dark, semi dark & light.
Custom light colors
Classic white
Light amber
Teal without shadow
Light red
Dark
Custom dark colors
Teal
Blue grey without shadow
Purple
This table contains all classes which can be used in navbar brand center. You can combine them as per navbar template requirements.
All these options can be set via following classes:
| Classes | Description |
|---|---|
.navbar-brand-center |
To set navbar brand center you need to add .navbar-brand-center class in navbar <nav> tag. Refer HTML markup line no 2. |
.navbar-light |
To set navbar light color you need to add .navbar-light class in navbar <nav> tag. Refer HTML markup line no 2. |
.navbar-dark |
To set navbar dark color you need to add .navbar-dark class in navbar <nav> tag. Refer HTML markup line no 2. |
.bg-[color] |
To set the dark navbar background color use |
.bg-darken-[*] |
To set the selected background color darken use
|
.border-[color] |
To set the dark navbar border color use |
.border-darken-[color] |
To set the selected border color darken use
|
This section contains HTML Markup to create navbar brand center. This markup define where to add css classes to make navbar brand center.
- Line no 1: Contain the
.navbar-brand-centerclass for adjusting navbar color.navbar-darkor.navbar-light. It has also.bg-teal&bg-darken-5to set darken background color andborder-teal&border-darken-4to set darken border.
<!-- fixed-top-->
<nav class="header-navbar navbar-expand-sm navbar navbar-with-menu navbar-brand-center navbar-dark bg-teal bg-darken-5 border-teal border-darken-4">
<div class="navbar-wrapper">
<div class="navbar-header">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item mobile-menu d-md-none float-left">
<button class="nav-link menu-toggle hamburger hamburger--arrow js-hamburger is-active"><span class="hamburger-box"></span><span class="hamburger-inner"></span></button>
</li>
<li class="nav-item">
<a href="index.html" class="navbar-brand nav-link"><img src="../../../app-assets/images/logo/stack-logo-light.png"></a>
</li>
<li class="nav-item d-md-none float-right"><a data-toggle="collapse" data-target="#navbar-mobile" class="nav-link open-navbar-container collapsed" aria-expanded="false"><i class="icon-ellipsis pe-2x icon-rotate-right"></i></a></li>
</ul>
</div>
<div class="navbar-container content">
<div id="navbar-mobile" class="collapse navbar-collapse">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--/ fixed-top-->