In your Materialize framework based projects, you most probably require using the navbar with a different color than default – to match it to the rest of design.įor modifying the default navbar color, you may override the nav-wrapper class. How to change the default color of materialize navbar? In the example page, you can also see that the materialize CSS and jQuery library are also included in the section. The same set of links (or links that you want to display on mobile) are also placed in another with side-nav class.Īfter the logo markup, the following line is used for the hamburger icon:įinally, a little jQuery code to make it work. In the markup section, you can see the navigational links are used twice one as in above example that hides in medium and small devices by using the hide-on-med-and-down class in containing links. This is done by using the hide-on-med-and-down class. The navigational links disappear on medium and small devices while only the logo keeps on displaying. In this example, a navbar is created with logo/slogan towards the left side and navigational links to the right side. The next section shows all the above mentioned examples with live demos and code, so keep reading.Ī navbar with logo and navigational links example The navbar may contain buttons, search box, and links/logo can be aligned left or right easily. The Materialize navbar is created by HTML 5 tag with container (recommended div) with nav-wrapper class.įor creating responsive navbar with hamburger icon, you may use the built-in class button-collapse for that. Creating navbars with various options is easy as using Materialize framework.

The navigation bar (navbar) that generally acts as the header in a website, is an important part to deal with.

Materialize tabs