CODEWITHSUNDEEP
cssangularjsangular-material
Frederick Eze
Frederick Eze

Reputation: 131

Change the height of md-nav-item in angular material

Please how can I override the default height of md-nav-item in angular material using CSS. I have the following sample code:

 <div ng-cloak>
<md-content class="md-padding">
  <md-nav-bar
  md-selected-nav-item="currentNavItem"
  nav-bar-aria-label="navigation links">
    <md-nav-item name="Page1" md-nav-click="goto('page2')">
      Link1
    </md-nav-item>
    <md-nav-item name="Page2" md-nav-click="goto('page2')">
      Link2
    </md-nav-item>
    <md-nav-item name="Page3" md-nav-click="goto('page2')">
      Link3
    </md-nav-item>
  </md-nav-bar>
  <div class="ext-content">
    {{currentNavItem}}
  </div>
</md-content>

See also example on plunker

Upvotes: 1

Views: 1180

Answers (1)

The.Bear
The.Bear

Reputation: 5855

After inspecting the styles, you can do something like this to change the height of the nabvar:

PLUNKER (Work from angular-material version >= 1.1.0)

.md-nav-bar, .md-nav-bar > nav, ._md-nav-bar-list, .md-button._md-nav-button{
  height: 50px;
}

.md-button._md-nav-button {
  padding: 0;
  min-height: 0;
}

**** Be sure of include your styles.css file after the angular-material.css file in your index.html

Explanation: You're asking about change the height of md-nav-item, but in fact, this directive is writing/transcluding a ul._md-nav-bar-list with .md-button._md-nav-button inside each li. So, you have to change the height of .md-button._md-nav-button. But the problem is that buttons doesn't have height, they have padding and min-height.
And even, the main problem is that .md-nav-bar has a default height (48px), so if you change the height of items inside it, it doens't matter, you have to override this default height first.

Upvotes: 2

Related Questions