Прозрачная панель навигации для materializecss
Я попытался сделать мою навигационную панель прозрачной в materializecss, но все мои попытки превратили ее в белый цвет. Любые предложения помогут. Спасибо. Вот моя попытка кода
<nav>
<div class = "nav-wrapper transparent">
<a href = "#!" class = "brand-logo"></a>
<a href = "#" data-activates = "mobile-demo" class = "button-collapse"><i class = "material-icons">menu</i></a>
<ul class = "right hide-on-med-and-down">
<li><a href = "#">Contact Me</a></li>
</ul>
<ul class = "side-nav" id = "mobile-demo">
<li><a href = "#">Contact Me</a></li>
</ul>
</div>
</nav>
Вторая попытка я попробовал это
<nav class = "transnav">
<div class = "nav-wrapper">
<a href = "#!" class = "brand-logo"></a>
<a href = "#" data-activates = "mobile-demo" class = "button-collapse"><i class = "material-icons">menu</i></a>
<ul class = "right hide-on-med-and-down">
<li><a href = "#">Contact Me</a></li>
</ul>
<ul class = "side-nav" id = "mobile-demo">
<li><a href = "#">Contact Me</a></li>
</ul>
</div>
</nav>
С добавленным CSS это тоже не сработало.
.transnav {
background-color: rgba(0,0,0,0);
}
Ответы 4
Скорее всего, у вас есть другой элемент с цветом фона. Способ отладки - это проверить все элементы в режиме проверки (например, проверка Google Chrome) и просмотреть CSS каждого дочернего элемента, чтобы потенциально найти тот, который имеет белый фон, и переопределить его.
Я могу, ты не справишься, ты можешь сделать это быстро и грязно (очень грязно).
Пытаться
.transnav * {
background-color: rgba(0,0,0,0)!important;
}
Он сообщит всем дочерним элементам .transnav, что цвет фона должен быть прозрачным.
Попробуйте использовать режим "Проверка" в Chrome, чтобы выяснить, где находится виновник, или поделитесь ссылкой на свою веб-страницу. Я посмотрю.
просто дайте свойство .nav{background:none;} вашему навигатору, и если есть больше элементов с белым фоном, дайте .element{background:none;} всем элементам, которые вы хотите, с прозрачным фоном.
You Should try bellow example. It will work for you. You have missed to set
!importanton css
nav{
background-color: transparent !important;
}
.nav-wrapper a{
color: #aaa !important;
} <!-- Compiled and minified CSS -->
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo">Logo</a>
<ul id = "nav-mobile" class = "right hide-on-med-and-down">
<li><a href = "sass.html">Sass</a></li>
<li><a href = "badges.html">Components</a></li>
<li><a href = "collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav><nav style = "background-color: rgba(0,0,0,0)!important;">
Я пробовал то, что вы сказали, не сработало. Он сбрасывает цвет навигационной панели на цвет по умолчанию.