CODEWITHSUNDEEP
cssmaterialize
SirMaxime
SirMaxime

Reputation: 154

Change the navbar color in MaterializeCSS

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

.nav-wrapper{
 background-color: <MYCOLOR HERE> !important;
}

But it just stays the same colored as mentioned in the class of the navbar.

Upvotes: 5

Views: 33169

Answers (4)

Dickson
Dickson

Reputation: 11

Add the color name and light/darkness as a class to the element. See details at Color-Matrialize.

Upvotes: 0

Diego Ven&#226;ncio
Diego Ven&#226;ncio

Reputation: 6007

For class nav-wrapper use:

.nav-wrapper {
    background-color: #850000 !important;
    font-size: 14px;
    font-weight: bold;
  }

Upvotes: 0

Hitesh Sahu
Hitesh Sahu

Reputation: 45062

Use Jquery to change color of navbar dynamically

  $(".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

See the Pen Materialize CSS Change Theme Color by Hitesh Sahu (@hiteshsahu) on CodePen.

Upvotes: -4

Igor Ivancha
Igor Ivancha

Reputation: 3451

Because in Materialize you have to change nav's background-color, for example you want white navbar: 

.nav {
  background-color: #ffffff !important;
}

Another solution, to add <nav>'s class white: 

<nav class="white">

It'll change navbar's backgroud-color too.

If you're using sass or scss, you have one more solution: 

nav {
  @extend .white;
}

Hope, it helps you!

Upvotes: 17

Related Questions