Question

我正在尝试在布尔玛制作透明菜单。这是我的桌面视口：

您可以看到我的桌面视口可以正常工作，但是当我尝试在移动设备上运行时，菜单如下：

它似乎使用与台式机版本相同的菜单属性，但是它具有白色背景，因此文本不可见。

您将如何自定义此移动菜单？我想给它一个透明的背景，以便它看起来像漂浮在背景图像上的文本。

<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>examp</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="css/bulma.css">

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
    <script src="js/validate-form.js"></script>
    <script src="js/google-validate.js"></script>
    <script src="js/scroll.js"></script>
    <script src="js/burger.js"></script>

    <script>
</script>

  </head>
  <body>

<section class="hero is-fullheight is-gradient">

  <nav class="navbar is-transparent">
      <div class="container">
        <div class="navbar-brand">
          <a href="index.html" class="navbar-item">
            <h1 class="title is-3 has-text-white">Example</h1>
          </a>

          <span id="nav-toggle" class="navbar-burger burger has-text-white" data-target="navbarMenuHeroA">
            <span></span>
            <span></span>
            <span></span>
          </span>

        </div>

        <div id="navbar-menu" class="navbar-menu">
          <div class="navbar-end">
            <a href="index.html" class="navbar-item is-active has-text-white">
                       <i class="fas fa-home"></i>
            </a>
            <a id="aboutbtn" href="#about" class="navbar-item has-text-white">
              About
            </a>
            <a href="portfolio.html" class="navbar-item has-text-white">
              Portfolio
            </a>
            <a href="#contact" class="navbar-item has-text-white">
              Contact
            </a>
          </div>
        </div>
      </div>
    </nav>

  <!-- Hero head: will stick at the top -->
  <div class="hero-head">

  </div>

  <!-- Hero content: will be in the middle -->
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title has-text-white">
        Issue with mobile menu!
      </h1>
      <h2 class="subtitle has-text-white">
        As you can see, the mobile-menu appears to be on a white background and is hard to see.
      </h2>
    </div>
  </div>

Jsfiddle：https://jsfiddle.net/xpvt214o/972239/

Answer 1

这是因为布尔玛（Bulma）在移动设备上以折叠状态显示了您的菜单。这就是说布尔玛将可折叠的背景设置为白色。快速浏览CSS可以发现黑暗。

@media screen and (max-width: 1087px) .navbar-menu { background-color: #fff; ... }

只需用一个自定义规则覆盖该规则即可，它应该可以正常工作。否则，如果布尔玛提供了该功能，请使用助手类在导航上设置透明背景。另外请记住要调整当前活动元素的背景。

有关实时示例，请参见here。只是不要复制样式，因为它使用的是!important。尝试避免使用!important关键字。

布尔马更改导航菜单

1 个答案: