Wie füge ich dem Inhalt für Desktop-Bildschirme in Materialisecss einen festen Sidénav-Abstand hinzu?

Question

Ich habe derzeit eine grundlegende Gliederung, aber wenn ich die Breite des Browsers reduzieren, deckt die Sitenav den Inhalt und das "Logo" in der Navigationsleiste. Ist es möglich, ein Padding für Desktop-Bildschirme zu erstellen (nicht für Mobilgeräte)? Hier

ist die Geige - https://jsfiddle.net/v2h8pvxz/

<nav> 
    <div class="container"> 
    <div class="nav-wrapper"><a href="#" class="brand-logo">Logo</a></div> 
    </div> 
    <ul class="right hide-on-med-and-down"> 
    <li><a href="#!" class="waves-effect">First Sidebar Link</a></li> 
    <li><a href="#!" class="waves-effect">Second Sidebar Link</a></li> 
    <li><a class="dropdown-button waves-effect" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li> 
    <ul id='dropdown1' class='dropdown-content'> 
     <li><a href="#!">First</a></li> 
     <li><a href="#!">Second</a></li> 
     <li><a href="#!">Third</a></li> 
     <li><a href="#!">Fourth</a></li> 
    </ul> 
    </ul> 
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a> 
</nav> 

<div class="row"> 
    <div class="col s12 m4 l3"> 
    <ul id="slide-out" class="side-nav fixed"> 
     <li><a class="waves-effect" href="#!">First Sidebar Link</a></li> 
     <li><a class="waves-effect" href="#!">Second Sidebar Link</a></li> 
     <li class="no-padding"> 
     <ul class="collapsible collapsible-accordion"> 
      <li> 
      <a class="collapsible-header waves-effect">Dropdown</a> 
      <div class="collapsible-body"> 
       <ul> 
       <li><a href="#!">First</a></li> 
       <li><a href="#!">Second</a></li> 
       <li><a href="#!">Third</a></li> 
       <li><a href="#!">Fourth</a></li> 
       </ul> 
      </div> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
    <div class="col s12 m8 l9"> 
    <h1>adsffadsadfsfdasadfsafds sadf sadf adfs </h1> 
    </div> 
</div> 

Answer 1

Ich sehe, dass Sie die feste SideNav verwenden. Hast du deinem Content auch die erforderliche Auffüllung hinzugefügt, um ihn auszugleichen?

Angenommen Sie haben die gemeinsame Struktur haben und Ihre Inhalte innerhalb Ihrer <main> Tags, fügen Sie diese zu Ihrer CSS-Datei:

header, main, footer { 
    padding-left: 240px; 
} 

@media only screen and (max-width : 992px) { 
    header, main, footer { 
    padding-left: 0; 
    } 
} 

Hier ist eine aktualisierte fiddle für Klarheit.

Beachten Sie, dass ich Ihren Inhalt innerhalb der <main> Tags hinzugefügt habe.