CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterialize
stone rock
stone rock

Reputation: 1953

How to add custom css style in existing materialize css buttons and navbar?

I am new to materialize css. I have made a navbar which has 4 li tags and one of it contains button. Now I want to change navbar background color and button size should be resized. How can I change the default color(red) of navbar and default color of button also I want to resize the button.How can it be done ?

header.js:

import React, { Component } from 'react';

class Header extends Component {

  render() {
    return (
      <div>   
          <nav>
            <div class="nav-wrapper">
              <a href="#" class="brand-logo">Udacity Logo</a>
              <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="#">Nanodegree</a></li>
                <li><a href="#">Hire Talent</a></li>
                <li><a href="#">For Business</a></li>
                <li><a class="waves-effect waves-light btn">Course Finder</a></li>
              </ul>
            </div>
          </nav>
      </div>
    );
  }
}

export default Header;

What should I add in header.css ?

Screenshot:

enter image description here

Upvotes: 2

Views: 2698

Answers (1)

brk
brk

Reputation: 50291

Try by adding a class to nav like <nav class="yourClassName"> and set color in this css class

.yourClassName{
   background:colorName
}

Simillary add another class here

<li><a class="waves-effect waves-light btn customClass">Course Finder</a></li>

.customClass{
   width:xxpx
}

If default property does not get overwritten use !important

Upvotes: 3

Related Questions