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

مونو ۴ رنگ برای نوار ناوبری دارد: 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>

نحوه سفارشی‌سازی موقعیت‌های نوار ناوبری

مونو دو موقعیت برای نوار ناوبری دارد: navbar fixed و navbar static.

Navbar Fixed

نوار ناوبری ثابت، موقعیت پیش‌فرض مونو است.


<body id="body" class="navbar-fixed">

                  


Navbar Static

کلاس navbar-static را به <body id="body"> اضافه کنید و کلاس navbar-fixed را حذف کنید.


<body id="body" class="navbar-static">

                  

مخاطبین

افزودن مخاطب جدید