manmon42 manmon42 - 3 months ago 88
HTML Question

Style Angular Material Nav bar

I have an Angular Material Nav bar in a toolbar as a header. The issue is the underline for the navbar tabs is fixed at the default pink. This is clashing with my page's colour scheme. The relevant code.

<div ng-controller="navCtrl" ng-cloak>
<md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding>
<md-toolbar class="md-hue-2">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-href="#/" name="home">Home</md-nav-item>
<md-nav-item md-nav-href="#/about" name="about">About</md-nav-item>

This is in the config for the app.

$mdThemingProvider.theme('docs-dark', 'default')

Any and all help is welcome.


You just need to use md-nav-bar md-nav-ink-bar css property in your css file.

md-nav-bar md-nav-ink-bar {
  background: green;

Here is a working example.