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

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

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

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

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/

Источник

1 ответ

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

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

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

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

Источник
Другие вопросы по тегам