Erstellen einer kleinen Navbar und eines Seitenpanels in Materialise css

Question

Ich verwende materialize css für mein neues Projekt. Ich habe ein simples Mock-up der Seite, die mir vorschwebt. Das möchte ich haben. Die obere Navigationsleiste und ein Seitenfeld sollten sich nicht verstecken.

ich die CSS von materialisieren zu ändern haben versucht, eine Seite navbar zu bekommen, aber ohne Erfolg. Ich habe die

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

zu

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

ich auch versucht, die JS-Datei zu ändern, aber es auch nicht funktioniert hat. Ich habe die Größe der normalen Navbar verringert, die die line-height Eigenschaft von nav überstiegen. Ist es möglich, Navbars zusammen zu haben? Wenn nicht, wie kann ich eine Seitenwand bekommen? Ich brauche nur die Seitenwand, um 4 Symbole zu zeigen, die Tooltip haben und beim Klicken ein Modal laden würde. Ich habe versucht, den Gittermechanismus der Materialien zu verwenden, konnte aber nicht erreichen, was ich wollte.

Jede Hilfe würde sehr geschätzt werden.

Danke.

Answer 1

Haben Sie versucht, eine obere Navigationsleiste zusammen mit einer festen Seitenleiste zu verwenden? Sie können dann die Breite der Seitenleiste anpassen, um die gewünschte Größe zu erhalten.

<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>