Материализация удалить навигационный фон - PullRequest
Новая
       11

Материализация удалить навигационный фон

0 голосов
/ 19 сентября 2018

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

<nav class="nav-extended">
  <div class="nav-wrapper">

    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="https://www.instagram.com/?hl=nl"><i class="fab fa-instagram"></i></a></li>
      <li><a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a></li>
      <li><a href="https://plus.google.com/discover"><i class="fab fa-google-plus-g"></i></a></li>
      <li><a href="https://twitter.com/?lang=nl"><i class="fab fa-twitter"></i></a></li>
    </ul>
  </div>

  <div class="nav-content">
    <ul class="tabs tabs-transparent">
      <li class="tab"><a href="#">contact us</a></li>
      <li class="tab"><a href="#">blog</a></li>
      <li class="tab"><a href="#">pages</a></li>
      <li class="tab"><a href="#">service</a></li>
      <li class="tab"><a href="#">about us</a></li>
      <li class="tab"><a href="#">home</a></li>
    </ul>
  </div>
</nav>

В этой навигации я пытаюсь удалить верхний фон, где находятся значки.У Материализации есть стандартный красный фон, который я не могу удалить.

Вот что я пробовал в своем CSS: 

background-color: none (!important);
background-color: rgba (0, 0, 0, 0);
opacity

Ответы [ 4 ]

0 голосов
/ 19 сентября 2018

Вы можете удалить фон или сделать его прозрачным с помощью этого background-color: transparent.Вы можете проверить в materialize.css файле сведения о свойствах по умолчанию, если вы хотите изменить их, то вы можете override указать их в соответствии с вашими потребностями. 

<head>
<style>
    nav {
        background-color: transparent;
    }

    body {
        background-image: url('./LRNHBJ.jpg');
        background-size: cover;
    }
</style>
</head>
<body>

<nav>

    <div class="nav-wrapper container">
        <a href="#" class="brand-logo black-text">Logo</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li>
                <a class="black-text" href="sass.html">Sass</a>
            </li>
            <li>
                <a class="black-text" href="badges.html">Components</a>
            </li>
            <li>
                <a class="black-text" href="collapsible.html">JavaScript</a>
            </li>
        </ul>
    </div>
</nav>
</body>

Навигационная часть Materialize.css:

Materialize-CSS code snippet

Прозрачный Навбар (без панели навигации цвета фона)

Demo Image

0 голосов
/ 19 сентября 2018

Красный фон по умолчанию унаследован от элемента nav.Поэтому, чтобы переопределить его, добавьте цвет к вашему классу nav-wrapper, например 

background-color: white;

И background-color: none - недопустимый параметр.Даже если вы добавите прозрачный фоновый цвет, он покажет красный цвет родительского контейнера:

PS: Пожалуйста, добавляйте jsfiddle или codePen с вашими вопросами, когда это возможно.

0 голосов
/ 19 сентября 2018

Используйте background:transparent во встроенном css 

    <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="https://www.instagram.com/?hl=nl"><i class="fab fa-instagram"></i></a></li>
        <li><a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="https://plus.google.com/discover"><i class="fab fa-google-plus-g"></i></a></li>
        <li><a href="https://twitter.com/?lang=nl"><i class="fab fa-twitter"></i></a></li>
    </ul>
 </div>

<div class="nav-content">
    <ul class="tabs tabs-transparent">
        <li class="tab"><a href="#">contact us</a></li>
        <li class="tab"><a href="#">blog</a></li>
        <li class="tab"><a href="#">pages</a></li>
        <li class="tab"><a href="#">service</a></li>
        <li class="tab"><a href="#">about us</a></li>
        <li class="tab"><a href="#">home</a></li>
    </ul>
</div>

0 голосов
/ 19 сентября 2018

Удалите второй цвет фона и удалите скобки вокруг! Важное. 

background-color: none !important;
...