How to customize navbar colors

Mono has 4 navbar colors: navbar light, navbar dark, navbar primay and navbar transparent.

Navbar Light

Navbar light is a default header color of Mono .


<header class="main-header" id="header">
  <nav class="navbar navbar-expand-lg navbar-light" id="navbar">
    <!-- Sidebar toggle button -->
    <button id="sidebar-toggler" class="sidebar-toggle">
      <span class="sr-only">Toggle navigation</span>
    </button>

    <span class="page-title">Page Titile</span>

    <div class="navbar-right ">

      <!-- Your code here -->

    </div>
  </nav>
</header>

Navbar Dark

Add class navbar-dark to <nav id="navbar"> and remove class navbar-light or navbar-primary or navbar-transparent if it was added before.


<header class="main-header" id="header">
  <nav class="navbar navbar-expand-lg navbar-dark" id="navbar">
    <!-- Sidebar toggle button -->
    <button id="sidebar-toggler" class="sidebar-toggle">
      <span class="sr-only">Toggle navigation</span>
    </button>

    <span class="page-title">Page Titile</span>

    <div class="navbar-right ">

      <!-- Your code here -->

    </div>
  </nav>
</header>

Navbar Primary

Add class navbar-primary to <nav id="navbar"> and remove class navbar-light or navbar-dark or navbar-transparent if it was added before.


<header class="main-header" id="header">
  <nav class="navbar navbar-expand-lg navbar-primary" id="navbar">
    <!-- Sidebar toggle button -->
    <button id="sidebar-toggler" class="sidebar-toggle">
      <span class="sr-only">Toggle navigation</span>
    </button>

    <span class="page-title">Page Titile</span>

    <div class="navbar-right ">

      <!-- Your code here -->

    </div>
  </nav>
</header>

Navbar Transparent

Add class navbar-transparent to <nav id="navbar"> and remove class navbar-light or navbar-dark or navbar-primary if it was added before.


<header class="main-header" id="header">
  <nav class="navbar navbar-expand-lg navbar-transparent" id="navbar">
    <!-- Sidebar toggle button -->
    <button id="sidebar-toggler" class="sidebar-toggle">
      <span class="sr-only">Toggle navigation</span>
    </button>

    <span class="page-title">Page Titile</span>

    <div class="navbar-right ">

      <!-- Your code here -->

    </div>
  </nav>
</header>