文章/答案/技术大牛

发布

社区首页 >问答首页 >Bulma更改导航菜单

问Bulma更改导航菜单
EN

Stack Overflow用户

提问于 2018-11-29 14:26:57

回答 1查看 2.3K关注 0票数 0

我试着在Bulma做一个透明的菜单。这是我的桌面视图：

普通视口菜单

如您所见，我的桌面视图可以正常工作，但当我尝试在移动平台上工作时，我的菜单如下所示：

移动/TABLET视图菜单

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

您将如何定制这个移动菜单？我想给它一个透明的背景，这样它就像漂浮在背景图像上的文本。

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

html

css

viewport

bulma

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-11-30 13:23:37

这是因为Bulma在手机上的折叠菜单中显示了你的菜单。也就是说，Bulma将可折叠的背景设置为白色。快速查看CSS照亮了黑暗。

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

只要用一个自定义的规则覆盖这个规则就可以了，它应该是有效的。否则，如果Bulma提供这种能力，则使用助手类在导航上设置透明的背景。还请记住调整当前活动元素的背景。

有关活生生的示例，请参见这里。只是不要复制样式，因为它使用的是!important。尽量避免使用!important关键字。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53541225

复制

相似问题

问Bulma更改导航菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bulma更改导航菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bulma更改导航菜单
EN