CODEWITHSUNDEEP
csshtmlmaterialize
magomagiamago
magomagiamago

Reputation: 91

How to turn off materialize's default shadows for navbar

I just want to turn off the shadows. I can make it from the browser with inspect and turning off all box-shadow classes, but I don't know how to do it from the html/css code.

Code:

<div class="navbar-fixed"> 
<nav class="navbar-transition cool-navbar ">
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
  </nav>
</div>

Upvotes: 3

Views: 5084

Answers (2)

meeow
meeow

Reputation: 111

From docs: A z-depth-0 can be used to remove shadows from elements that have z-depths by default. https://materializecss.com/shadow.html

<nav class="navbar-transition cool-navbar z-depth-0">

Upvotes: 11

Simranjit Singh
Simranjit Singh

Reputation: 404

Make a class as 

.no-shadows {
    box-shadow: none!important;
}

and then add it to the elements you want to remove shadows from.

Upvotes: 4

Related Questions