Is Materialize Navbar height adjustment possible?

2019-03-19 02:56发布

问题:

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.

回答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;
    }
}


回答2:

You can add class on nav tag like that :

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


标签: materialize