Bulma Изменение меню навигации - PullRequest
Новая
       11

Bulma Изменение меню навигации

0 голосов
/ 29 ноября 2018

Я пытаюсь сделать прозрачное меню в булме.Это мой видовой экран рабочего стола:

НОРМАЛЬНОЕ МЕНЮ ПРОСМОТРА ПРОСМОТРА

Как вы можете видеть, у меня нормально работает видовой экран рабочего стола, но когда я пытаюсь заставить эту работу работать нана мобильном устройстве мое меню выглядит следующим образом:

МЕНЮ ПРОСМОТРА МОБИЛЬНЫХ / ТАБЛЕТКИ

Похоже, что используются те же свойства меню, что и в настольной версии, но это даетбелый фон, поэтому текст невидим.

Как бы вы настроили это мобильное меню?Я хотел бы дать ему прозрачный фон, чтобы он просто выглядел как текст, плавающий на фоновом изображении. 

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

1 Ответ

0 голосов
/ 30 ноября 2018

Это потому, что Булма показывает ваше меню в свернутом для мобильного.Тем не менее, Булма установил белый складной фон.Быстрый взгляд на CSS освещает темноту.

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

Просто перезапишите это правило с помощью пользовательского правила, чтобы оно стало прозрачным, и оно должно работать.Иначе, и если Bulma предоставляет эту возможность, используйте вспомогательный класс, чтобы установить прозрачный фон для вашей навигации.Также имейте в виду, чтобы настроить текущий активный фон элементов.

См. здесь для живого примера.Просто не копируйте стиль, так как он использует !important.Старайтесь не использовать ключевое слово !important.

...