title: bottom navigation menu html/css
body: <p>I want to make a website with a normal top menu on big screens and a bottom menu in small screens but I'm confused if I need to create two different menus.</p>
  <p>For example:</p>
  <pre><code>&lt;nav class=&quot;menu&quot;&gt;
      &lt;img src=&quot;logo.png&quot; alt=&quot;logo&quot;&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;nav class=&quot;mobile-menu&quot;&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;i class=&quot;fas fa-settings&quot;&gt;&lt;/i&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;i class=&quot;fas fa-home&quot;&gt;&lt;/i&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>Or is there another way to do this?</p>
  <p>I want a menu like this on big screens:</p>
  <p><img src="https://i.stack.imgur.com/LgI5X.png" alt="menu on big screens" /></p>
  <p>And like this on small screens:</p>
  <p><img src="https://i.stack.imgur.com/ZslwI.png" alt="menu on small scresns" /></p>