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.
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.
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;
}
}
You can add class on nav tag like that :
nav {
height: 30px;
line-height: 30px;
}