Search code examples
htmlcssmaterialize

CSS - Fixed Position broke Materialize columns

I want to create a type of sidenav menu for Large and Medium screen using Materialize.

I used the example given in the Materialize doc.

it works it's cool!

But the fact is, I want my Sidenav to be a the entire Height if the screen. I've tried several things. I've found a Source, using Fixed:position; inside my CSS, it puts the sidenav on the entire height, but it breaks the Materialize Columns system.

enter image description here

If I removed the fixed:position I having this result: enter image description here

I having this on my body:

<body>    
<nav>
    <!-- Top Navabar -->

</nav>

<div class="row">

 <div class="col s12 m4 l2 red" id="sidenav"> 
   <ul class="menu">
     <!--Sidenav content-->
   </ul>
   </div>
   

    <div class="col s12 m8 l10">
    <div class="row">
        <div class="col s12 m12 l12">
            <!-- Body Content-->
    </div>
    </div>

</div>

My CSS looks like this:

#sidenav{
  min-height: 100%;
  position: fixed;
  z-index: 999;
  background-size: 100%;
}

You can have a full code example here: https://jsfiddle.net/pq19g3t2/

So how could I have my sidenav on the entire height of the screen and my body which stays correctly inside the columns I have define with materialize?

Solution

  • add this class for right side section push-m4 push-l2 change some css width media query like 

    #sidenav{

  background-size: 100%;
}
@media(min-width:601px){
  #sidenav{
   min-height: 100%;
  position: fixed;
  z-index: 999;
  }
}

<div class="col s12 m8 l10 push-m4 push-l2">
  <div class="row">
     <div class="col s12 m12 l12">
        <!-- Body Content-->
  </div>
</div>

    https://jsfiddle.net/qoxjb1yh/