responsive flexbox navbar

1<nav>
2      <ul class="menu">
3        <li class="logo"><a href="#">Grid Header</a></li>
4        <li class="item"><a href="#">Venstre</a></li>
5        </li>
6        <li class="toggle"><a href="#"><i class="fa fa-bars" id="bars"></i></a></li>
7      </ul>
8    </nav>

1/*
2*               *
3* Menu / Header *
4* Menu / Header *
5* Menu / Header *
6* Menu / Header *
7*               *
8*/
9
10nav {
11  background: #222;
12  padding: 5px 20px;
13}
14ul {
15  list-style-type: none;
16}
17a {
18  color: white;
19  text-decoration: none;
20}
21a:hover {
22  text-decoration: underline;
23}
24.logo a:hover {
25  text-decoration: none;
26}
27.menu li {
28  font-size: 16px;
29  padding: 15px 5px;
30  white-space: nowrap;
31}
32.logo a,
33.toggle a {
34  font-size: 20px;
35}
36.button.secondary {
37  border-bottom: 1px #444 solid;
38}
39/* Mobile menu */
40.menu {
41  display: flex;
42  flex-wrap: wrap;
43  justify-content: space-between;
44  align-items: center;
45}
46.toggle {
47  order: 1;
48}
49.item.button {
50  order: 2;
51}
52.item {
53  width: 100%;
54  text-align: center;
55  order: 3;
56  display: none;
57}
58.item.active {
59  display: block;
60  background-color: rgb(192, 79, 79);
61  border-radius: 4px;
62}
63/* Tablet menu */
64@media all and (min-width: 600px) {
65  .menu {
66    justify-content: center;
67  }
68  .logo {
69    flex: 1;
70  }
71  .toggle {
72    flex: 1;
73    text-align: right;
74  }
75  .item.button {
76    width: auto;
77    order: 1;
78    display: block;
79  }
80  .toggle {
81    order: 2;
82  }
83  .button.secondary {
84    border: 0;
85  }
86  .button a {
87    padding: 7.5px 15px;
88    background: teal;
89    border: 1px #006d6d solid;
90  }
91  .button.secondary a {
92    background: transparent;
93  }
94  .button a:hover {
95    text-decoration: none;
96  }
97  .button:not(.secondary) a:hover {
98    background: #006d6d;
99    border-color: #005959;
100  }
101  .button.secondary a:hover {
102    color: #ddd;
103  }
104}
105
106
107/* Desktop menu */
108@media all and (min-width: 900px) {
109  .item {
110    display: block;
111    width: auto;
112  }
113  .toggle {
114    display: none;
115  }
116  .logo {
117    order: 0;
118  }
119  .item {
120    order: 1;
121  }
122  .button {
123    order: 2;
124  }
125  .menu li {
126    padding: 15px 10px;
127  }
128  .menu li.button {
129    padding-right: 0;
130  }
131}
132
133/*
134*               *
135! Menu / Header SLUT *
136! Menu / Header SLUT *
137! Menu / Header SLUT *
138! Menu / Header SLUT *
139*               *
140*/