使 bootstrap 导航栏透明时切换图标消失

Question

<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">

<nav id="fondo" class="navbar navbar-expand-lg fixed-top" style="background-color: rgba(0, 0, 0, 0.2);">

  <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-toggler-icon"></span>
  </button>

</nav>

<div style="height:1000px"></div>

我用 bootstrap 制作了一个透明的导航栏，但是当必须显示切换器图标时，它就在那里，但它也是透明的，我不知道如何让它可见。

我不知道你需要查看代码的哪一部分才能知道我的错误在哪里，但我让本地服务器保持打开状态，这样你就可以看到 html 和 css 代码.

http://87.218.3.238/cbd/

Answer 1

将所需的类之一添加到 #fondo 导航中，以便 bootstrap 中的 svg 可以正确加载。

在你的情况下，最有可能的是：

<nav id="fondo" class="navbar navbar-expand-lg fixed-top">

<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">

<nav id="fondo" class="navbar navbar-expand-lg fixed-top navbar-dark" style="background-color: rgba(0, 0, 0, 0.2);">

  <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-toggler-icon"></span>
  </button>

</nav>

<div style="height:1000px"></div>

Answer 2

和jquery

var cdbMenu = $("#fondo");
var cdbMenuSize = 992;
function cdbMenuSwap()
{
    if (window.innerWidth >= cdbMenuSize) {
        cdbMenu.css({"background-color": "rgba(0, 0, 0, 0.2)"});
    } else {
        cdbMenu.removeAttr('style');
    }
}
$(window).on('resize', function () {
    cdbMenuSwap();
});
$(document).ready(function () {
    cdbMenuSwap();
});

使 bootstrap 导航栏透明时切换图标消失

Toggler Icon disappears when making bootstrap navbar transparent

css

navbar

twitter-bootstrap