如何使用引导材料设计使导航栏固定在顶部？ frezvasta.github.io

Question

我正在使用 Bootstrap 材料设计。这是https://fezvrasta.github.io/bootstrap-material-design/ 这是 jsfiddle https://jsfiddle.net/Manoj07/4c90wbo3/ 在此，我无法将导航栏固定在顶部。我也在使用抽屉导航栏，所以请帮助我如何使用引导材料设计制作导航栏固定顶部？ 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代码

.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;
}

Answer 2

你有没有像这样在html中添加class？

Answer 3

你的标记都是错误的，已经修复了标记和css的copule更新。

您可以添加sticky-top 类以使元素粘在顶部。

请检查更新的 jsfiddle Here

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