1

I am using materialize css for my new project. I have a simple mock up of the page I have in mind. This is what I would like to have. The navbar above and a side panel shouldn't hide.

The screen mock up

I have tried changing the css of materialize to get a side navbar, but to no avail. I changed the 

@media only screen and (max-width: 992px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}

to 

@media only screen and (max-width: 2000px) {
    .side-nav.fixed {
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}

I also tried to change the .js file, but it also didnt work. I have decreased the size of normal navbar over-riding the line-height property of nav. Is it possible to have to navbars together ? If not, how may I be able to get a side panel. I only need the side panel to show 4 icons, which will have tooltip and on clicking would load up a modal. I tried using grid mechanism of materializecss but wasn't able t get what I want.

Any help would be much appreciated.

Thanks.

Abhishek Guha
  • 13
  • 1
  • 4
  • what do you need actually edit your question and add what you need? you need your side-nav hide or you want to create it? – Heartagramir Jun 30 '16 at 11:55
  • I need to create that mockup. The width of the navigation bar at top and side panel should be small. I just can't get that side panel to work. – Abhishek Guha Jun 30 '16 at 12:23

1 Answers1

8

Have you tried using a top navbar along with a fixed sidebar? You could then style the width of the sidebar to get the size you want.

<header>
      <nav class="top-nav">
        <div class="nav-wrapper">
            <ul class="right hide-on-med-and-down">
                <li><a href="#">Log In</a></li>
                <li><a href="#">Sign Up</a></li>
            </ul>
        </div>
      </nav>
      <ul style="width:120px; margin-top:65px;" class="side-nav fixed">
        <li><a href="#">Icon 1</a></li>
        <li><a href="#">Icon 2</a></li>
      </ul>      
</header>
JazzBrotha
  • 1,628
  • 11
  • 15