Question

我对html，css，js和bootstrap 4还是陌生的。我正在尝试建立一个网站来练习我的技能。我终于设法更改了bootstrap 4导航栏的颜色，文本，字体大小等，但是当我按比例缩小时，汉堡包符号消失了，并且我失去了选择。

我删除的唯一代码是bg-light更改颜色，以及在我的代码上创建自定义类以更改文本颜色

指向我的代码的链接：https://codepen.io/jehc10/pen/LKqRRQ

             .navbar-nav {
              background:#4287f5;
              }

              .navbar-brand {
               background:#4287f5;
                     }

                .navbar-brand.custom{
                  color:#FFFFFF;
                   font-size:25px
                  /* border-right:2px solid black; */

                        }

                         .navbar {
                          background:#4287f5;
                               }

                           body {
                           font-family: 'Poppins', sans-serif;
                           /* font-weight:700; */
                            }

                          .navbar-nav li a {
                           color: #FFFFFF;
                           font-size:20px;
                              }

Answer 1

与其使用图像汉堡包，不如使用HTML和CSS创建汉堡包。

.navbar, .navbar-nav {
  background: #4287f5;
}
.navbar-brand.custom {
  color: #FFFFFF;
  font-size: 25px
}
.navbar-toggler {
  padding: .25rem .5rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: .25rem;
}
.navbar-togglebar {
  background: #FFFFFF;
  display: block;
  width: 25px;
  height: 2px;
  vertical-align: middle;
  margin: 5px;
}
.navbar-nav li a {
  color: #FFFFFF;
  font-size: 20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand custom" href="#">Jesse</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-togglebar"></span>
    <span class="navbar-togglebar"></span>
    <span class="navbar-togglebar"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">About me <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact me</a>
      </li>
    </ul>
  </div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 2

您可以将以下样式添加到导航汉堡图标：

/*Initial burger state*/
button.navbar-toggler.navbar-dark.collapsed {
    background: #000;
}

/*When toggled*/
.navbar-toggler:not(:disabled):not(.disabled) {
    cursor: pointer;
    background: #000;
}

修改颜色后不再出现Bootstrap汉堡包

2 个答案: