Блог

Я хотел иметь панель навигации, которая не сворачивается ни на одном устройстве, я использовал Bootstrap, но когда я пытаюсь открыть раскрывающийся список ниже 768 пикселей, он расширяется внутри navbar . и выглядит некрасиво, несмотря на то, что я использовал класс sm, он не работает должным образом и сворачивается в md

HTML

 <nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
  <div class="container">
    <a class="navbar-brand" routerLink="/"><i class="fa fa-leaf" aria-hidden="true"></i> NAV BRAND</a>
    
    <div id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto pull-left pull-top ">
        <li class="nav-item active">
          <a class="nav-link" routerLink="/shopping-cart" routerLinkActive="active" style="margin-right:10px">
            <i class="fas fa-shopping-cart"></i>
            <span class="badge badge-warning badge-pill"
              *ngIf="cart$ | async as cart">
                    {{ cart.totalItemsCount }}
            </span>
          </a>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li
          *ngIf="appUser; else anonymousUser"
          ngbDropdown
          class="nav-item dropdown"
        >
          <a
            ngbDropdownToggle
            class="nav-link dropdown-toggle"
            id="dropdown01"
            button class="btn btn-primary"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
            >{{ appUser.name }}</a>
          <div
            ngbDropdownMenu
            class="dropdown-menu"
            aria-labelledby="dropdown01">
            <a class="dropdown-item" routerLink="/my/orders">My Orders</a>
            <ng-container *ngIf="appUser.isAdmin">
              <a class="dropdown-item" routerLink="/admin/orders"
                >Manage Orders</a>
              <a class="dropdown-item" routerLink="/admin/products"
                >Manage Products
              </a>
            </ng-container>
            <a class="dropdown-item"  (click)="logout()">Logout</a>
          </div>
        </li>
        <ng-template #anonymousUser>
          <li class="nav-item">
            <a class="nav-link" button class="btn btn-primary"   (click)="login()">Login</a>
          </li>
        </ng-template>
      </ul>
    </div>
  </div>
</nav>
  

CSS

 @media only screen and (max-width: 400px) {
    .navbar-brand{
        margin:0;
        font-size:15px;
    }
    .nav-link{
        font-size:12px;
    }
    .btn-primary{
        font-size:12px;
        margin:0;
    }
    .dropdown-menu{
        min-width: 10px !important;
        
    }
}
  

Я не уверен, но я думаю, что класс и идентификатор поддерживают только 3 разных стиля, которые будут использоваться одновременно, вы прошли через 5, поэтому теперь вам нужно проверить пять различных стилей, чтобы увидеть, находится ли position: fixed; в одном из них или переопределяет его. и я не вижу никакого javascript….