CSS 帮助 - Bootstrap 4 导航栏汉堡图标

Question

我的 angular 代码库中有一个 bootstrap 4 导航栏当浏览器的屏幕尺寸变小时，我想隐藏导航栏并引入汉堡包图标和侧边菜单.

我尝试了很少但我什么也做不了，所以正在寻找如何实现这一目标的指导！

我有我的HTML、TS和CSS供大家参考。

我的HTML:

<nav class = "navbar navbar-expand-md navbar-fixed-top nav-border" role="navigation">
    <ul class="navbar-nav mx-auto" *ngFor="let menu of menus">
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" data-target="{{menu.heading}}">{{menu.heading}}</a>
            <div class="dropdown-menu" aria-labelledby="{{menu.heading}}">
                <a *ngFor="let option of menu.options" href="{{option.link}}" target="_blank" class="dropdown-item">{{option.name}}</a>
            </div>
        </li>
    </ul>
</nav>

我的学生：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-top-menu',
  templateUrl: './top-menu.component.html',
  styleUrls: ['./top-menu.component.css']
})
export class TopMenuComponent implements OnInit {

  menus : any = [
    {
      
        heading: "MENU1",
        options: 
        [
          {name: "GOOGLE",link: "https://google.com/", order: 1},
          {name: "GitHub",link: "https://github.com", order: 2},
        ]
      
    }
  ];
  
  isDropdownOpen: boolean = false;
  constructor() { }

  ngOnInit(): void {
  }

}

我的CSS:

.navbar{
    padding:0px;
}
.nav-border {
    border-bottom:1px solid #ccc;
}
li { cursor: pointer; }

li:hover{
    background-color: black;
}

a {
    color: black;
}

.navbar-nav {
    padding: .9rem 0 0;
}

.nav-link:hover {color:white;}

.widthd{
    width: 100%;
}

我的屏幕：

Answer 1

问题出在您的 class navbar-fixed-top 上，将其更改为 fixed-top 并且您还必须将汉堡包按钮添加到您的导航栏中。

你可以试试这个：

<nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mx-auto" *ngFor="let menu of menus">
                <li class="nav-item dropdown">
                    <a class="nav-link" data-toggle="dropdown" data-target="{{menu.heading}}">{{menu.heading}}</a>
                    <div class="dropdown-menu" aria-labelledby="{{menu.heading}}">
                        <a *ngFor="let option of menu.options" href="{{option.link}}" target="_blank"
                            class="dropdown-item">{{option.name}}</a>
                    </div>
                </li>
            </ul>
       </div>
</nav>

CSS 帮助 - Bootstrap 4 导航栏汉堡图标

CSS HELP - Bootstrap 4 Navbar Burger Icon

css

navbar

hamburger-menu

bootstrap-4

angular