CODEWITHSUNDEEP
javascripthtmlangularjsangular-material
manmon42
manmon42

Reputation: 319

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.

Upvotes: 3

Views: 6311

Answers (2)

Arun
Arun

Reputation: 874

update to latest version angular-material

It was an issue.

Upvotes: 2

nextt1
nextt1

Reputation: 3988

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

Upvotes: 8

Related Questions