manmon42 manmon42 - 2 months ago 55
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>
</md-nav-bar>
</md-toolbar>
</md-content>
</div>


This is in the config for the app.

$mdThemingProvider.theme('docs-dark', 'default')
.primaryPalette('grey')
.warnPalette('red')
.accentPalette('blue')
.dark();


Any and all help is welcome.

Answer

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. http://codepen.io/next1/pen/yJaojP

Comments