How to Make Navigation Buttons Mobile-Responsive and Collapse in Order?

Question

I have been trying for hours with different methods to get my navigation buttons to be mobile-responsive and collapse in a specified vertical order. I want the nav buttons to collapse in a vertical column below the two logos, once the screen size is shrunken (to around 500px). How do I fix my code to achieve this?

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

Here is a link to my CodePen: https://codepen.io/IDCoder/full/rGWeEE/

score 1 · Answer 1 · answered Oct 06 '17 at 19:18

CSS is all about be natural order, natural position, natural styles... what I means is that your code isn't being natural, you can see here:

.navigation li {
  display: inline-block;

}

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

I want to focus me in those properties because here we are saying:

You <a> element that are inside this man -> <li> (<li id="NAV-ONE"><a href="#">LOG IN</a></li>), yes you! You will be bigger even if you're inside him!

Well, in real life, we can't put bigger things into smaller spaces. What happens in real life and CSS is: smaller things into bigger things.

So if we make this change:

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

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

It takes a natural order (because now the spaces where .navigation a will be is bigger than him). The final code is something like this (this will wrap when you use phone):

.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;
}

More

I was playing and I found this cool way to wrap when screen is small, I think it's cool:

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

Also, remember that when you want to make responsive design you need meta:viewport into your html's head:

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

thanks for the great info! I highly appreciate it! It worked~ — codebwoy, Oct 08 '17 at 03:12

How to Make Navigation Buttons Mobile-Responsive and Collapse in Order?

1 Answers1

Linked