Wie macht man Navigations-Buttons mobil-reaktiv und kollabiert in Ordnung?

Question

Ich habe seit Stunden mit verschiedenen Methoden versucht, um meine Navigationstasten mobile-reaktionsfähige und kollabieren in einer angegebenen vertikalen Reihenfolge. Ich möchte die Navigationsknöpfe in eine vertikale Spalte unter den beiden Logos, wenn die Bildschirmgröße (auf etwa 500px) geschrumpft ist zusammenbrechen. Wie kann ich meinen Code reparieren, um dies zu erreichen?

.container-fluid { 
 
    border: 1px solid #000000; 
 
    max-width: 1600px; 
 
    overflow: hidden; 
 
} 
 

 
.wrap { 
 
    /*background-color: yellow;*/ 
 
    /*overflow: hidden;*/ 
 
} 
 

 
.Logos { 
 
    width: 312px; 
 
    display: inline-block; 
 
    /*background-color: blue;*/ 
 
} 
 

 

 
/* 
 
    .Logos img{ 
 
    max-width: 300px; 
 
    height: auto; 
 
    } 
 
    */ 
 

 
.nav.wrap.one { 
 
    display: inline-block; 
 
    /*background-color: green;*/ 
 
    float: right; 
 
    margin-top: 25px; 
 
} 
 

 
ul.navigation { 
 
    font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    /*text-align center;*/ 
 
    /*border: 1px solid green;*/ 
 
    /*overflow: hidden;*/ 
 
} 
 

 
.navigation li { 
 
    display: inline-block; 
 
} 
 

 
.navigation a { 
 
    background: #395870; 
 
    background: linear-gradient(#49708f, #293f50); 
 
    border-right: 1px solid rgba(0, 0, 0, .3); 
 
    color: #fff; 
 
    padding: 12px 20px; 
 
    text-decoration: none; 
 
} 
 

 
.navigation a:hover { 
 
    background: #314b0; 
 
    box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3); 
 
} 
 

 
.navigation li:first-child a { 
 
    border-radius: 4px 0 0 4px; 
 
} 
 

 
.navigation li:last-child a { 
 
    border-right: 0; 
 
    border-radius: 0 4px 4px 0; 
 
} 
 

 
.row.two { 
 
    background-image: url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg); 
 
    background-position: absolute; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    max-width: 100%; 
 
    height: 550px; 
 
    margin: auto; 
 
} 
 

 
.floater.box { 
 
    background-color: rgba(255, 255, 255, .40); 
 
    border-radius: 10px; 
 
    /*opacity: .45;*/ 
 
    max-width: 75%; 
 
    height: 200px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    overflow: hidden; 
 
} 
 

 
.form-search { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    font: bold 13px sans-serif; 
 
    max-width: 325px; 
 
    position: relative; 
 
} 
 

 
.form-search input { 
 
    width: 230px; 
 
    box-sizing: border-box; 
 
    border-bottom-left-radius: 2px; 
 
    border-top-left-radius: 2px; 
 
    background-color: #ffffff; 
 
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); 
 
    padding: 14px 15px 14px 40px; 
 
    border: 1px solid #b6c3cd; 
 
    ; 
 
    border-right: 0; 
 
    color: #4E565C; 
 
    outline: none; 
 
    margin-top: 70px; 
 
    -webkit-appearance: none; 
 
} 
 

 
.form-search button { 
 
    border-bottom-right-radius: 2px; 
 
    border-top-right-radius: 2px; 
 
    background-color: #6caee0; 
 
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); 
 
    color: #ffffff; 
 
    padding: 15px 22px; 
 
    margin-left: -4px; 
 
    cursor: pointer; 
 
    border: none; 
 
    outline: none; 
 
} 
 

 
.form-search i { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 20px; 
 
    font-size: 16px; 
 
    color: #80A3BD; 
 
} 
 

 

 
/* Placeholder color */ 
 

 
.form-search input::-webkit-input-placeholder { 
 
    color: #879097; 
 
} 
 

 
.form-search input::-moz-placeholder { 
 
    color: #879097; 
 
    opacity: 1; 
 
} 
 

 
.form-search input:-ms-input-placeholder { 
 
    color: #879097; 
 
} 
 

 
.nav.wrap.two { 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 100%; 
 
    margin-top: 10px; 
 
}

<div class="container-fluid"> 
 

 
    <!-- Top Box --> 
 
    <div class="wrap"> 
 
    <div class="Logos"> 
 
     <img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" /> 
 
     <img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" /> </div> 
 
    <div class="nav wrap one"> 
 
     <!--navigation buttons--> 
 
     <ul class="navigation"> 
 
     <li id="NAV-ONE"><a href="#">LOG IN</a></li> 
 
     <li id="NAV-TWO"><a href="#">BUY A HOME</a></li> 
 
     <li id="NAV-THREE"><a href="#">SELL A HOME</a></li> 
 
     <li id="NAV-FOUR"><a href="#">CONTACT US</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <!-- Middle Box --> 
 
    <div class="row two"> 
 
    <div> 
 
     <div class="floater box"> 
 

 
     <form class="form-search" method="get" action="#"> 
 
      <input type="search" name="search" placeholder="I am looking for.."> 
 
      <button type="submit">Search</button> 
 
      <i class="fa fa-search"></i> 
 
     </form> 
 

 
     </div> 
 

 

 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Bottom Box --> 
 
<div class="row three"> 
 
    <div class="nav wrap two"> 
 
    <!--navigation buttons--> 
 
    <ul class="navigation"> 
 
     <li id="NAV-A"><a href="#">MY LISTINGS</a></li> 
 
     <li id="NAV-B"><a href="#">COMMUNITIES SERVED</a></li> 
 
     <li id="NAV-C"><a href="#">PROPERTIES</a></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
</div>

Hier ist ein Link zu meinem CodePen: https://codepen.io/IDCoder/full/rGWeEE/

Answer 1

CSS ist über die natürliche Ordnung, natürliche Position, natürliche Arten zu sein ... was ich bedeutet, dass Ihr Code isn ‚t ist natürlich, können Sie hier sehen:

.navigation li { 
    display: inline-block; 

} 

.navigation a { 
    padding: 12px 20px; 
} 

ich mich in diesen Eigenschaften konzentrieren wollen, weil wir hier sind sayin g:

Sie <a> Element, das in diesem Mann sind -><li> (<li id="NAV-ONE"><a href="#">LOG IN</a></li>), ja Sie! Du wirst größer sein, auch wenn du in ihm bist!

Nun, im wirklichen Leben können wir größere Dinge nicht in kleinere Räume bringen. Was passiert im wirklichen Leben und CSS ist: kleinere Dinge in größere Dinge.

Also, wenn wir diese Änderung vornehmen:

.navigation li { 
    display: inline-block; 
    padding: 12px 20px; 
} 

.navigation a { 
    /* We changed who is bigger than who */ 
} 

Es dauert eine natürliche Ordnung (weil jetzt die Räume, in denen .navigation a sein wird größer als er ist). Der letzte Code ist so etwas wie dieses (diese wickeln, wenn Sie telefonieren):

.navigation li { 
    display: inline-block; 
    padding: 12px 20px; 
    background: linear-gradient(#49708f, #293f50); 
    background: #395870; 
    border-right: 1px solid rgba(0, 0, 0, .3); 
} 

.navigation a { 
    color: #fff; 
    text-decoration: none; 
} 

Mehr

Ich spielte und ich fand diese coole Art und Weise zu wickeln, wenn der Bildschirm klein ist, ich denke, es ist cool: auch

@media all and (max-width: 500px){ 
    ul.navigation{ 
     display: flex; 
     flex-wrap: wrap; 
     justify-content: flex-end; 
    } 
} 

, denken Sie daran, dass, wenn Sie Responsive Design Sie Meta machen möchten, müssen: Ansichtsfenster in Ihre html des hea d:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">