CSS 在 MaterializeCSS 中更改导航栏颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39299063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change the navbar color in MaterializeCSS
提问by SirMaxime
I want to dynamically change the background color of the navbar from Materialize, so it needs to be done via a CSS. I tried doing
我想从 Materialize 动态更改导航栏的背景颜色，因此需要通过 CSS 完成。我试着做
.nav-wrapper{
background-color: <MYCOLOR HERE> !important;
}
But it just stays the same colored as mentioned in the class of the navbar.
但它只是保持与导航栏类中提到的颜色相同。
回答by Igor Ivancha
Because in Materialize you have to change nav's background-color, for example you want white navbar:
因为在 Materialise 中，您必须更改nav的背景颜色，例如您想要白色导航栏：
.nav {
background-color: #ffffff !important;
}
Another solution, to add <nav>'s class white:
另一个解决方案，添加<nav>类white：
<nav class="white">
It'll change navbar's backgroud-color too.
它也会改变导航栏的背景颜色。
If you're using sass or scss, you have one more solution:
如果您使用 sass 或 scss，则还有另一种解决方案：
nav {
@extend .white;
}
Hope, it helps you!
希望，对你有帮助！
回答by Diego Venancio
For class nav-wrapperuse:
对于类导航包装器使用：
.nav-wrapper {
background-color: #850000 !important;
font-size: 14px;
font-weight: bold;
}
回答by Dickson
Add the color name and light/darkness as a class to the element. See details at Color-Matrialize.
将颜色名称和明暗度作为类添加到元素中。请参阅Color-Matrialize 的详细信息。
回答by Hitesh Sahu
Use Jquery to change color of navbar dynamically
使用 Jquery 动态更改导航栏的颜色
$(".nav-wrapper").css("background-color", themeColor);
$(".nav-wrapper").css("background-color", themeColor);
Here is my code Snippet
这是我的代码片段
</body>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("themeColor", "blue");
// Retrieve
$("#themeColor").innerHTML = localStorage.getItem("themeColor");
} else {
$("#themeColor").innerHTML = "Sorry, your browser does not support Web Storage...";
}
$(".nav-wrapper").css("background-color", 'purple');
$(".secondary-content>.material-icons").css("color", 'purple');
$(".btn").css("background-color", 'purple');
$(".page-footer").css("background-color", 'purple');
$(".input-field").css("color", 'purple');
$(".input-field>.material-icons").css("color", 'purple');
$(".input-field>label").css("color", 'purple');
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
$(document).ready(function(){
$("button").click(function(){
var themeColor = getRandomColor();
$(".nav-wrapper").css("background-color", themeColor);
$(".secondary-content>.material-icons").css("color", themeColor);
$(".btn").css("background-color", themeColor);
$(".page-footer").css("background-color", themeColor);
$(".input-field").css("color", themeColor);
$(".input-field>.material-icons").css("color", themeColor);
$(".input-field>label").css("color", themeColor);
$(".btn-floating").css("background-color", themeColor);
});
});
</script>
</html>
See the Live Demo Here
在此处查看现场演示
看笔 Materialize CSS Change Theme ColorMaterialise CSS Change Theme Colorby Hitesh Sahu (@hiteshsahu@hiteshsahu) 上CodePen代码笔。