​x
 
1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  .main-nav {
5
    display: flex;
6
    background: orangered;
7
    color: white;
8
    border-radius: 3px;
9
    padding: 1em;
10
    font-family: sans-serif;
11
  }
12
  .main-nav > ul {
13
    list-style-type: none;
14
    padding: 0;
15
    margin: 0;
16
    display: flex;
17
    flex: 3;
18
  }
19
  .main-nav li {
20
    margin-right: 1em;
21
  }
22
  .main-nav > form {
23
    display: flex;
24
    justify-content: flex-end;
25
    flex: 1;
26
  }
27
  .main-nav input {
28
    flex: 1;
29
  }
30
  .main-nav button {
31
    background: white;
32
    border: 0;
33
    border-radius: 1em;
34
    color: orangered;
35
    padding: 0 1em;
36
    margin-left: .3em;
37
  }
38
 @media screen and (max-width: 575px) {
39
   .main-nav {
40
     flex-direction: column;
41
   }
42
   .main-nav ul {
43
     flex-direction: row; /* Change this to 'column' to stack the links */
44
     margin-bottom: 1em;
45
   }
46
  }
47
</style>
48
​
49
<nav class="main-nav">
50
  <ul>
51
    <li>Logo</li>
52
    <li>Home</li>
53
    <li>Products</li>
54
    <li>Services</li>
55
  </ul>
56
  <form>
57
    <input type="search" placeholder="Search">
58
    <button>Go</button>
59
  </form>
60
</nav>