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 cannot just increase the size of a navbar in Bootstrap by directly targeting the parent element by css. In order to increase the height of the navbar , you have to increase the size of the children > li > a . Keep in mind that the children already have vertical padding of 15px.
Personally I feel most comfortable using a navbar height of 64px. It is enough height to accommodate a logo, and there is room enough to use text in combination with symbols.
As a reminder nav wrapper templates are templates that typically produce the header and footer markup that wraps around the content of each page. This is done so that you have don't have to handle all this output in each individual page template.
You can change color of your navbar by just adding name of color as a class you can pick colors from Colors. If you want the color header of the menu to be same as navbar use . navbar-full class with your <aside> tag.
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;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With