Is Materialize Navbar height adjustment possible?

Question

Is it possible to adjust the height of the Navbar in Materialize?

64px is a bit too much for my site. I was going for 30px before I decided to materialize it.

Answer 1

You have to override some CSS properties:

nav {
    height: 30px;
    line-height: 30px;
}

nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
    height: 30px;
    line-height: 30px;
}

nav .button-collapse i {
    height: 30px;
    line-height: 30px;
}

nav .brand-logo { 
    font-size: 1.6rem; 
}

@media only screen and (min-width: 601px){
    nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
        height: 30px;
        line-height: 30px;
    }
}

Answer 2

You can add class on nav tag like that :

nav {
            height: 30px;
        line-height: 30px;
    }

Answer 3

You have to override some CSS properties(FOR NEW VERSION):

nav {
    height: 30px;
    line-height: 30px;
}

nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
    height: 30px;
    line-height: 30px;
}

nav .button-collapse i {
    height: 30px;
    line-height: 30px;
}

nav .brand-logo { 
    font-size: 1.6rem; 
}

@media only screen and (min-width: 601px){
    nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i{
        height: 30px;
        line-height: 30px;
    }

}