توضیحات

طرح نوار ثابت دارای یک نوار ناوبری ثابت و فهرست ناوبری و فوتر می باشد. تنها قسمت نوار ناوبری برای کاربر به صورت ثابت است. در این صفحه میتوانید آن را تجربه کنید.

کلاس های CSS

این جدول شامل تمامی کلاس های مرتبط با طرح نوار ناوبری ثابت می باشد.

تمامی این گزینه ها میتوانند توسط کلاس های زیر تنظیم شوند:

کلاس ها توضیحات
.navbar-sticky برای تنظیم نوار ثابت می بایست کلاس navbar-sticky را به تگ <body> اضافه کنید.
.fixed-top برای تنظیم نوار ثابت می بایست کلاس fixed-top را به تگ <nav> اضافه کنید.

کدهای HTML

این قسمت شامل کد های HTML برای ایجاد طرح نوار ناوبری ثابت می باشد. این کد ها مشخص میکنند که کلاس های مورد نیاز برای ثابت کردن نوار ناوبری را کجا باید اضافه کنید. نوار ناوبری دارای فاصله بین فهرست ناوبری و نوار ناوبری نیست.

قالب فرست دارای صفحات شروع آماده برای استفاده می باشد. شما می توانید این طرح را مستقیما با استفاده از صفحات شروع واقع در پوشه Theme/starter-kit استفاده کنید.

        
            <!DOCTYPE html>
              <html lang="fa">
                <head></head>
                <body class="vertical-layout vertical-menu-modern 2-column navbar-sticky menu-expanded" data-menu="vertical-menu-modern" >

                  <!-- fixed-top-->
                  <nav class="header-navbar navbar-expand-lg navbar navbar-with-menu fixed-top navbar-light navbar-shadow">
                      ...
                  </nav>

                  <!-- Begin Navigation-->
                  <div class="main-menu menu-fixed menu-light menu-accordion menu-shadow expanded">
                      ...
                  </div>
                  <!-- End Navigation-->

                  <!-- Begin Content-->
                  <div class="app-content content">
                      .....
                  </div>
                  <!-- End Content -->

                  <!-- Start Footer light -->
                  <footer class="footer footer-static footer-light">
                      ...
                  </footer>
                  <!-- End Footer Light -->

                </body>
              </html>