Как сделать navbar закрепленным сверху, используя bootstrap материал дизайна? frezvasta.github.io

Question

Я использую Bootstrap дизайн материала. Это https://fezvrasta.github.io/bootstrap-material-design/ вот это jsfiddle https://jsfiddle.net/Manoj07/4c90wbo3/ В этом я не могу сделать панель навигации закрепленной сверху. Я также использую панель навигации в ящиках, поэтому, пожалуйста, помогите мне, как сделать панель навигации фиксированной верхней, используя bootstrap дизайн материала? frezvasta.github.io

<header class="bmd-layout-header">
   <div class="navbar navbar-light bg-faded">
      <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
      <span class="sr-only">Toggle drawer</span>
      <i class="material-icons">menu</i>
      </button>
      <a href="index.html" class="navbar-brand" style="padding-right: 27%;">aabbaaaa</a>
      <a href="profile.html" style="text-decoration: none; color: black;"><i class="far fa-user-circle pl-1"
         style="padding:0;"></i></a>
      <a href="cart.html" style="color: inherit!important;"><i class="fas fa-shopping-cart pl-1"><sup><span
         class="badge badge-info">0</span></sup></i></a>
   </div>
</header>
<div id="dw-s2" class="bmd-layout-drawer bg-faded">
   <header style="display: inline-block;">
      <a href="index.html" style="color: black;"><i class="fas fa-home"></i>Home</a>
      <a class="navbar-brand" href="index.html" style="padding-left: 50%;"><img src="img/logo.png" class="img-fluid"
         style="height: 25px;width: 25px;"></a>
   </header>
   <ul class="list-group">
      <li class="list-group-item">
         <div class="dropright show">
            <a class="dropdown-toggle text-dark" href="#" role="link" id="dropdownMenuLink" data-toggle="dropdown"
               aria-haspopup="true" aria-expanded="false">
            Categories
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
               <a class="dropdown-item" style="color: black;" href="fashion_category.html">Women</a>
               <a class="dropdown-item" style="color: black;" href="fashion_category.html">Home Furniture</a>
               <a class="dropdown-item" style="color: black;" href="fashion_category.html">TVs and Appliances</a>
               <a class="dropdown-item" style="color: black;" href="fashion_category.html">Sports, Books & More</a>
               <a class="dropdown-item" style="color: black;" href="fashion_category.html">Mobiles and Gadgets</a>
               <a class="dropdown-item" style="color: black;" href="fashion_category.html">Men</a>
               <a class="dropdown-item" style="color: black;" href="fashion_category.html">Pets</a>
               <a class="dropdown-item" style="color: black;" href="fashion_category.html">Baby</a>
               <a class="dropdown-item" style="color: black;" href="fashion_category.html">Cars & Bikes</a>
            </div>
         </div>
      </li>
      <li class="list-group-item"><a href="cart.html" style="color: black;">My Cart</a></li>
      <a href="my_order.html" style="text-decoration: none; color: black;">
         <li class="list-group-item">
            My order
         </li>
      </a>
      <a href="profile.html" style="text-decoration: none; color: black;">
         <li class="list-group-item">My account</li>
      </a>
      <li class="list-group-item">Notifications</li>
      <li class="list-group-item">Help center</li>
   </ul>
</div>
<main class="bmd-layout-content">
<div class="search-container">
   <input type="text" placeholder="Search aabbaaaa for products" name="search">
   <button type="submit"><i class="fa fa-search"></i></button>
</div>

Answer 1

Вы отметили, что все было неправильно, исправлена ​​разметка и обновлен код css.

Вы можете добавить sticky-top класс, чтобы элемент был прикреплен к вершине.

Пожалуйста, проверьте обновленный jsfiddle Здесь

Поскольку html слишком длинный, я не обновляю его здесь полностью, просто размещаю часть заголовка.

<header class="bmd-layout-header sticky-top">
        <div class="navbar bg-light bg-faded">
            <button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
                <span class="sr-only">Toggle drawer</span>
                <i class="material-icons">menu</i>
            </button>
            <a href="index.html" class="navbar-brand" style="padding-right: 27%;">aabbaaaa</a>

            <a href="profile.html" style="text-decoration: none; color: black;"><i class="far fa-user-circle pl-1"
                    style="padding:0;"></i></a>
            <a href="cart.html" style="color: inherit!important;"><i class="fas fa-shopping-cart pl-1"><sup><span
                            class="badge badge-info">0</span></sup></i></a>
        </div>
    </header>

Answer 2

Вы добавили class, как это в вас html?

Answer 3

поместите css код

.bmd-layout-header .navbar{
      position: fixed;
    right: 0;
    left: 0;
}
.bmd-layout-content {
    padding-top: 56px;
}

ИЛИ

вы можете поместить материал css .fixed-top класс рядом с .navbar классом и поместить это css, чтобы ваш макет не перекрывать, чтобы исправить заголовок

.bmd-layout-content {
    padding-top: 56px;
}