Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is Materialize Navbar height adjustment possible?

Tags:

materialize

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.

like image 569
Predrag Stojadinović Avatar asked Feb 22 '16 11:02

Predrag Stojadinović


People also ask

How do I change the height of the navigation bar in CSS?

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.

What should be the height of navbar?

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.

What is NAV wrapper?

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.

How do I change the color of a navbar in materialize CSS?

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.


1 Answers

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;
    }
}
like image 123
Allan Pereira Avatar answered Sep 25 '22 11:09

Allan Pereira