CODEWITHSUNDEEP
csshtmlmaterialize
wahmal
wahmal

Reputation: 947

how to add margin bottom on sidenav materializecss?

i want to adding margin bottom 50px on my sidenav on large device. But doesn't work.

margin bottom sidenav materialize

this is my css :

ul.side-nav,side-nav{
   margin-bottom:50px!important;
}

my html :

<ul id="slide-out" class="side-nav">
<li><div class="userView">
  <div class="background">
    <img src="images/office.jpg">
  </div>
  <a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
  <a href="#!name"><span class="white-text name">John Doe</span></a>
  <a href="#!email"><span class="white-text email">[email protected]</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>

Upvotes: 0

Views: 2153

Answers (2)

wahmal
wahmal

Reputation: 947

You can fix it by doing the below:

side-nav{
     height: calc(100% - 115px) !important;
}

Upvotes: 1

ZP Baloch
ZP Baloch

Reputation: 391

Change it's Height if you want some gap under side nav css should be

side-nav{
   height:70%;
}

height is 100% in the given example. so it will cover all the screen.That's why you can't see margin.

Upvotes: 1

Related Questions