Search code examples
materialize

Is Materialize Navbar height adjustment possible?

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.

Solution

  • 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;
    }
}