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

Question

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:

brk · Accepted Answer · 2018-03-11 05:16:35Z

3

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

answered Mar 11, 2018 at 5:16

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

stone rock Over a year ago

Thanks but how can I resize the button in 4th li tag

Liam Over a year ago

@stonerock nav li:nth-child(4) {background: red;}

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related