title: how can I resize the Components when window size change in my NavBar?
body: <p>I'm new to ReactJs now learning the react-bootstrap and trying to learn the <code>NavBar</code>. I made a <a href="https://codesandbox.io/s/greta100-reactbootsrap-navbar-2-30mk2?file=/src/components/elements/NavBar.jsx" rel="nofollow noreferrer">CodeSandbox</a>.</p>
  <p>I really like the design like this:</p>
  <p><a href="https://i.stack.imgur.com/RNLyz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RNLyz.jpg" alt="enter image description here" /></a></p>
  <p>The NavBar is set to <code>fixed=&quot;top&quot;</code> so it's always visible when user scroll.<br />
  When I change the size of the window the NavBar get higher I try setting css like:</p>
  <pre><code>.NavBar {
    max-height: 80px;
  }
  </code></pre>
  <p>But <code>Buttons</code> and all components jump around wrapping making <code>NavBar</code> larger and not very good looking.</p>
  <p>how can I resize the Components when window size change?</p>
  <p><a href="https://i.stack.imgur.com/2IMZO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2IMZO.jpg" alt="enter image description here" /></a></p>
  <p>I see many pages uses different <code>NavBar</code> layouts and switch between them when window is resized. Is that done using css or should I create another React <code>Component</code> another <code>NavBar</code> and replace <code>NavBar</code> depending on window size?</p>