نحوه سفارشی‌سازی رنگ‌های نوار ناوبری

مونو ۴ رنگ برای نوار ناوبری دارد: navbar light, navbar dark, navbar primay و navbar transparent.

Navbar Light

Navbar light ، رنگ پیش‌فرض هدر مونو است.


<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

کلاس navbar-dark را به <nav id="navbar"> اضافه کنید و کلاس navbar-light یا navbar-primary یا navbar-transparent را اگر از قبل اضافه شده اند حذف کنید.


<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

کلاس navbar-primary را به <nav id="navbar"> اضافه کنید و کلاس navbar-light یا navbar-dark یا navbar-transparent را اگر از قبل اضافه شده اند حذف کنید.


<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

کلاس navbar-transparent را به <nav id="navbar"> اضافه کنید و کلاس navbar-light یا navbar-dark یا navbar-primary را اگر از قبل اضافه شده اند حذف کنید.


<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>