Seitenlayout mit Kopfzeile Haupt-und Fußzeile Tag

Question

Ich habe 4 Blöcke Header, Abschnitt, Main, Footer.

The layout of my site

Ich habe ein horizontales Menü in der Kopfzeile und ich stellte es über dem Abschnitt Menü, das meinen Schieber. aber das Problem ist, ich möchte das Menü vertikal, wenn die Seitenbreite ist weniger als 1136 Pixel, das Menü deckt meine Schieberegler im Abschnitt und ich will das nicht. Was ich will, ist das Menü unter dem Abschnitt, so dass der Benutzer das Menü und Schieberegler sehen kann. Ich stelle meine Website URL gut zu verstehen.

/*Header Tag*/ 
 
.cd-header { 
 
    position: absolute; 
 
    z-index: 5; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: rgba(0,1,1,0.4); 
 
} 
 
    /*section Tag*/ 
 
.cd-hero{ 
 
    position: relative; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 
    /*main Tag*/ 
 
.cd-main-content { 
 
    width: 90%; 
 
    max-width: 768px; 
 
    margin: 0 auto; 
 
    padding: 2em 0; 
 
}

Answer 1

schnellerer Weg durch nur Display mit: kein

ein weiteres Menü hinzufügen unter Ihrem Abschnitt den der Schieber ist, und es nur zeigen, wenn es um die Breite erreicht 1136px .

Ein anderer Weg ist flex

Mit flex Sie die Reihenfolge der Elemente festlegen können; Hier ist eine Anleitung zu flexbox. Referenz als auch here

Beispiel mit flex:

<header> 
    <div class="wrapper"> 
     <nav>...links...</nav> 
     <div class="slider"></div> 
    </div> 
</header> 
<section></section> 

/** CSS **/ 
header .wrapper { 
    display:flex; 
    flex-direction:column; 
} 

@media only screen and (max-width:1136px){ 
    nav { 
     order:2; 
    } 
    .slider { 
     order:1; 
    } 
}