Ng свернуть z-index и расположить по вертикали - PullRequest
Новая
       176

Ng свернуть z-index и расположить по вертикали

1 голос
/ 06 августа 2020

Я пытаюсь найти решение, чтобы изменить положение нижнего ng- bootstrap свернуть с горизонтального на вертикальное и изменить z-index для меню свертывания (без изменения положения для остальной части страницы при открытии). 

<nav class="navbar navbar-expand-lg navbar-light bg-light mb-3">
  <a class="navbar-brand" [routerLink]="'.'">Responsive navbar</a>


  <button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">
    &#9776;
  </button>


  <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item active">
       <a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">Examples</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [routerLink]="'.'" (click)="isMenuCollapsed = true">About</a>
      </li>
    </ul>
  </div>
</nav>

<p>
  These steps were used to create this responsive navbar.
</p>

<ol>
  <li>
    Add a property to the component to track whether the menu is open.
    In this example, the property is called <code>isMenuCollapsed</code>.
  </li>
  <li>
    Add an <code>ngbCollapse</code> directive to the element
    with the <code>navbar-collapse</code> CSS class. Use the
    property in the component as the value for the directive.
  </li>
  <li>
    When the navbar toggler button is clicked, toggle the
    value of the property in the component.
  </li>
  <li>
    If you would like the menu to close when a link is clicked,
    add a <code>(click)</code> handler to each link and set the
    property on the component to true to hide the menu.
  </li>
</ol>
...