Question

所以我一直在尝试为我的一个朋友开发这个网站，但我似乎无法让汉堡菜单出现。我已经尝试了几个小时，但似乎没有任何效果。导航栏的格式是错误的，还是我遗漏了什么，这非常令人沮丧。所以我添加了 css，现在汉堡菜单出现了，但它看起来像一个红色的盒子。它也会出现在较大的屏幕上，而它只应该出现在较小的设备上。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script type="text/javascript" src="script/script.js"></script>
  <title>Bootstrap</title>
</head>

<body class="darkbg">
  <nav class="navbar navbar-expand-lg navbar-white d-flex justify-content-center">
    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar-dropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link nvm-link current-link" href="index.html"> NVM </a>
        </li>
        <li class="nav-item">
          <a class="nav-link non-active-link" href="gallery.html"> GALLERY </a>
        </li>
        <li class="nav-item">
          <a class="nav-link non-active-link" href="shop.html"> SHOP </a>
        </li>
        <li class="nav-item">
          <a class="nav-link non-active-link" href="#"> MUSIC </a>
        </li>
        <li class="nav-item">
          <a class="nav-link non-active-link" href="#"> CONTACT </a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid full-height">
    <div class="row">
      <div class="col-lg-6">
        <div class="home-article">
          <h2 class="home-header flexFont">WHO THE HELL ARE WE?</h2>
          <p class="text-indent main-text"> Hell is full, of all the torturing, screaming, killing, fire, smoke, and poker games a demon could ask for. Unforunately, Satan had no interest in giving us what we needed to have a successful business in the underworld, and most of the other
            demons laughed in our faces or ignored us. </p>
          <p class="text-indent main-text"> Nobody in hell cared about us, and why would they? It's fucking hell, but me and my cool ass friends knew we deserved more than that. So, we sought out to find the prophesied portal to the surface realm. And guess what bitches, WE FOUND IT!
            </p>
          <p class="text-indent main-text"> After we celebrated, we closed the portal to prevent any lames from rising above and stealing our awesome idea, We were gonna make this business happen in a world where people care about looking badass(almost everone in hell is pretty badass).</p>
          <p class="text-indent main-text"> After we arrived, you humans didn't really take kindly to a bunch of unholy beasts trying to sell you shit, understandable. So we did some research, removed our horns, and made ourselves some awesome masks. <br> NOW WE LOOK LIKE YOU! BOOM! </p>
          <p class="text-indent main-text"> You're welcome, it took a lot of soul for us to demote ourselves to your standard so you could buy our gold, so have some fucking empathy. Look at our art, buy our clothes and other cool ass merchandise, sign up for our newsletter too while
            you're at it. </p>
          <p class="text-indent main-text"> Don't worry. We don't want to kill you, without you we serve no purpose. We just want to spread our noise surface-wide(and then maybe eat your soul, if you're a poser). </p>
          <p class="text-indent main-text bottom-text"> Welcome to <a class="text-red" href="#"> NVM </a>, the home of the designer demons.</p>
        </div>
      </div>
      <div class="col-lg-6">
        <img class="demon-pic" src="" alt="IMAGE OF THE SEVEN OF US DRAWN AS OUR DEMONS">
      </div>
    </div>
  </div>


</body>

</html>

这是我的 CSS：

.navbar-toggle {
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
}

.navbar-toggle .icon-bar {
  background-color: red;
}

Answer 1

您的 navbar-light 元素缺少重要的类 <nav。

这个类需要在导航栏中正确显示图标和颜色。

所以只需改变

<nav class="navbar navbar-expand-lg navbar-white d-flex justify-content-center">

到

<nav class="navbar navbar-expand-lg navbar-white d-flex justify-content-center navbar-light">

汉堡图标将可见

bootstrap 导航栏汉堡菜单

1 个答案: