Html 如何使用bootstrap材质设计使导航条固定在顶部？frezvasta.github.io

我使用的是Bootstrap材质设计。那是 给你，是JSFIDLE 在这种情况下，我无法制作固定在顶部的导航条。我也在使用抽屉导航栏，所以请帮助我如何使用引导材料设计使导航栏固定在顶部？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>

拨动抽屉
菜单




通知
帮助中心

把这个

css

code

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

或

您可以将材质css

.fixed top

类放在

.navbar

类旁边，然后放置此css，这样您的布局就不会与fix header重叠

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

---

您是否在

html

中添加了这样的

class

---

您的标记完全不正确，已修复了css的标记和copule更新

您可以添加

sticky top

类以使元素粘到顶部

请检查更新的JSFIDLE

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

拨动抽屉
菜单

这是演示链接，您可以prefer@jeevankotian不客气，兄弟，别忘了投赞成票：）