布尔马更改导航菜单

Question

I am trying to make a transparent menu in Bulma. 我正在尝试在布尔玛制作透明菜单。 This is my desktop viewport: 这是我的桌面视口：

As you can see I have got the desktop viewport to work fine, but when I try to make this work on mobile, my menu looks like this: 如您所见，我已经使桌面视口正常工作，但是当我尝试使其在移动设备上运行时，我的菜单如下所示：

MOBILE/TABLET VIEWPORT MENU 移动/平板电脑视口菜单

It appears to use the same menu properties as on the desktop version, but it gives it a white background so the text is invisible. 它似乎使用与桌面版本相同的菜单属性，但是它具有白色背景，因此文本不可见。

How would you customise this mobile menu? 您将如何自定义此移动菜单？ I would like to give it a transparent background so it just appears like text floating on the background image. 我想给它一个透明的背景，以便它看起来像漂浮在背景图像上的文本。

<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/ Jsfiddle： https ：//jsfiddle.net/xpvt214o/972239/

Answer 1

This is because Bulma shows your menu in a collapsed for on mobile. 这是因为布尔玛在折叠状态下在移动设备上显示了菜单。 That said collapsable background is set to white by Bulma. 这就是说布尔玛将可折叠的背景设置为白色。 A quick look into the CSS lights up the darkness. 快速浏览CSS可以发现黑暗。

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

Just overwrite that rule with a custom one to transparent and it should work. 只需使用自定义规则覆盖该规则以使其透明即可，它应该可以工作。 Else, and if Bulma provides that ability, use a helper class to set transparent background on your nav. 否则，如果布尔玛提供了该功能，请使用助手类在导航上设置透明背景。 Also keep in mind to adjust your currently active elements background. 还请记住调整您当前活动的元素背景。

See here for a live example. 请参见此处的实时示例。 Just don't copy the styling, since it's using !important . 只是不要复制样式，因为它使用的是!important 。 Try to avoid using !important keyword. 尽量避免使用!important关键字。

布尔马更改导航菜单

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-11-30 13:23:37

布尔马更改导航菜单

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-11-30 13:23:37

解决方案1
0 已采纳 2018-11-30 13:23:37