Search code examples
cssangularjsangularjs-material

Remove border from navbar

I am using angularjs material for designing but i stuck at removing border of the navbar list from the md-nav-list. enter image description here

image of navbar

the red line under page one is the line i want to remove code is 

<div layout="row" class="navbar-top" flex >
    <md-input-container class="md-block" md-no-float >
            <md-icon class="material-icons">search</md-icon>
            <input type="text" ng-model="user" placeholder="search.." class="search-bar" >
    </md-input-container>
    <md-nav-bar flex="60" md-no-ink-bar="disableInkBar" md-selected-nav-item="currentNavItem"  nav-bar-aria-label="navigation links">

            <md-nav-item md-nav-click="goto('page1')" name="page1">
              Page One
            </md-nav-item>
            <md-nav-item md-nav-sref="#" >
              <md-icon class="material-icons">messages</md-icon>
            </md-nav-item>

          </md-nav-bar>

Solution

  • Assuming you want the border to always be gone, you need to change you mod-nav-bar's md-no-ink-bar attribute to be set to true, a.k.a md-no-ink-bar="true" instead of md-no-ink-bar="disableInkBar". I'm guessing you saw that setting used in the documentation, but that was probably because they had a variable disableInkBar set by an angular controller that they were then using to toggle the border. For you case though, as long as you don't want to turn the border on and off, setting it to md-no-ink-bar="true" should do exactly what you want! :)