Bulma 更改导航菜单

Question

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

NORMAL VIEWPORT MENU

如您所见，我的桌面视口可以正常工作，但是当我尝试在移动设备上使用时，我的菜单如下所示：

MOBILE/TABLET VIEWPORT MENU

它似乎使用了与桌面版相同的菜单属性，但它的背景是白色，因此文本是不可见的。

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

<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 在移动设备上以折叠的形式显示您的菜单。 Bulma 将可折叠背景设置为白色。快速浏览 CSS 照亮了黑暗。

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

只需用自定义规则覆盖该规则即可透明，它应该可以工作。否则，如果 Bulma 提供了这种能力，请使用帮助程序 class 在您的导航中设置透明背景。还要记住调整您当前活动的元素背景。

有关实例，请参阅 here。只是不要复制样式，因为它使用 !important。尽量避免使用 !important 关键字。

Bulma 更改导航菜单

Bulma Changing Navigation Menu

html

javascript

css

viewport

bulma