title: How do i deal with responsive menu?
body: <p>I'm trying to make a responsive menu but texts are coming down when im resizing my website. </p>
  
  <p>When i'm resizing to a lower dimension like 637 x 400  "a empresa" "projetos" and "contato" they drop and come down.</p>
  
  <pre class="lang-css prettyprint-override"><code>nav {
      height: 60px;
      width: 100%;
      background-color: #a23286;
      color: #eee;
      position: fixed;
      text-align: center;
  }
  /* menu + logo dimensoes */
  nav ul {
      display: inline-block;
      padding: 0;
      margin: 0;
      text-align: center;
  }
  
  nav li {
      float: none;
      display: inline-block;
      text-align: center;
  }
  
  nav a {
      display: inline-block;
      width: 100px;
      text-align: center;
      padding: 17px 0;
      color: #eee;
      text-decoration: none;
  }
  
  nav ul li:hover {
    border-bottom: 5px solid #a23286;
  }
  
  nav a#openup {
      display: none;
  }
  </code></pre>
  
  <p>Should i just create a query in css for this state and change the font of the text?</p>
  
  <p><a href="https://codepen.io/rfop2/pen/JjjBBRe" rel="nofollow noreferrer">https://codepen.io/rfop2/pen/JjjBBRe</a></p>