I have trouble making my navbar transparent. Instead what shows is a white background. I have even tried editing the materialize css source files and adding the class 'transparent' and nothing changes. Does anyone have a work around for this?
<div class="navbar-fixed transparent">
<nav class="transparent">
<div class="nav-wrapper transparent">
<a href="#" class="brand-logo center">KAYWA</a>
<a href="#" data-activates="mobile-demo" class="button-collapse" id="btncollapse">
☰
</a>
<ul class="left hide-on-med-and-down transparent">
<li><a href="#" class="link">HOME</a></li>
<li><a href="#" class="link">ABOUT US</a></li>
<li><a href="#" class="link">SOCIAL MEDIA</a></li>
<li><a href="#" class="link">CONTACT US</a></li>
</ul>
<ul class="right hide-on-med-and-down transparent">
<li><a href="#" class="link"><i class="fa fa-instagram fa-2x"></i></a></li>
<li><a href="#" class="link"><i class="fa fa-facebook fa-2x"></i></a></li>
<li><a href="#" class="link"><i class="fa fa-twitter fa-2x"></i></a></li>
<li><a href="#" class="link"><i class="fa fa-google-plus fa-2x"></i></a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SOCIAL MEDIA</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#"><i class="fa fa-instagram fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-facebook fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-twitter fa-2x"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus fa-2x"></i></a></li>
</ul>
</div>
</nav>
I used a simple CSS solution that should work:
.transparentBG {
background-color: rgba(0,0,0,0);
}
Then you put this class in the nav tag, after the div that makes navbar fixed, no need to replicate in your entire code.
将元素的背景颜色设置为透明会继承容器的背景颜色,默认情况下为白色。
.z-depth-1,
nav,
.card-panel,
.card,
.toast,
.btn,
.btn-large,
.btn-small,
.btn-floating,
.dropdown-content,
.collapsible,
.sidenav {
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0), 0 3px 1px -2px rgba(0,0,0,0), 0 1px 5px 0 rgba(0,0,0,0);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0), 0 3px 1px -2px rgba(0,0,0,0), 0 1px 5px 0 rgba(0,0,0,0);
}
paste this in a css file and it should work!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.