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

Answer 1

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