Best Practice NavBar?

Is this a good practice when creating a responsive navBar? Im creating another nav inside a nav for mobile screens.

<div>
  <nav>
    {/* Logo */}
    <img/>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  
  {/* Mobile Nav burger menu */}
  <div className="burgerMenu"></div>

  {/* Mobile Nav */}
  <nav>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>

  </nav>
</div>

<div>
  <nav>
    {/* Logo */}
    <img/>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  
  {/* Mobile Nav burger menu */}
  <div className="burgerMenu"></div>

  {/* Mobile Nav */}
  <nav>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>

  </nav>
</div>

10 Replies

ἔρως•9mo ago

Why not just a single nav that's styled differently based on the device width?

Tenkes•8mo ago

and you should probably use header instead of div for this

Dev_zxc•8mo ago

i'll try i basically just followed a youtube video https://www.youtube.com/watch?v=HVyct9EUNP8&t=2101s

Code Commerce

YouTube

Build A Responsive Next JS Website Using Tailwind CSS - Beginner Guide

Build A Responsive Next JS Website Using Tailwind CSS - Beginner Guide In this video I go over the basics of creating a Next JS website incorporating the Image component Next JS provides to us as well as the internal routing system. This means all of the images we will use take advantage of lazy loading! Wi will build an image slider that lazy ...

ἔρως•8mo ago

yeah, but you dont need to repeat the menu if you can just make it responsive with css

snxxwyy•8mo ago

You don’t need two, for layout purposes you can simply use something like this, you can hide certain elements depending on the screen size using a class system and for the navbar you can easily style it for mobile and adjust in a media query for desktop. For example, you could make the nav element a position: fixed;, move it to the sides or the top and additionally move it off screen for an animation, then for desktop, in your media query, simply just set it back to it’s default position and put a display flex on it. I typed this on mobile so I’m sorry for any formatting issues, I’ll fix it when I’m on my pc. HTML

<header>
   <a href=“#”>logo-here</a>

   <nav>
      <ul>
         <li>
            <a href=“#”>home</a>
         </li>
         <li>
            <a href=“#”>about</a>
         </li>
         <li>
            <a href=“#”>contact</a>
         </li>
      </ul>
      <button class=“hide-desktop”>
      <img src=“close-menu.svg” alt=“”>
      </button>
   </nav>

   <button class=“hide-desktop”>
      <img src=“hamburger-menu.svg” alt=“”>
   </button>
</header>

<header>
   <a href=“#”>logo-here</a>

   <nav>
      <ul>
         <li>
            <a href=“#”>home</a>
         </li>
         <li>
            <a href=“#”>about</a>
         </li>
         <li>
            <a href=“#”>contact</a>
         </li>
      </ul>
      <button class=“hide-desktop”>
      <img src=“close-menu.svg” alt=“”>
      </button>
   </nav>

   <button class=“hide-desktop”>
      <img src=“hamburger-menu.svg” alt=“”>
   </button>
</header>

CSS

@media (min-width: 50rem) {
   .hide-desktop {
      display: none;
   }
}

@media (min-width: 50rem) {
   .hide-desktop {
      display: none;
   }
}

Dev_zxc•8mo ago

Oh i just tried something idk if this is fine but i've tried to merge things up after what you've said @ἔρως about dont repeat the nav, so what i basically did was store the styles inside my globals.css in a 1 classname and delete the other nav+ul now this is what it looks like, thanks for the effort tho guys let me know if this isn't right either(really sorry im just trying things up) but i get the idea of applying styles only on a certain breakpoint

ἔρως•8mo ago

instead of the top div, use a <header> tag, as suggested there

Dev_zxc•8mo ago

oh yeah i forgot thanks

ἔρως•8mo ago

you're welcome

Dev_zxc•8mo ago

yipee i think im learning now thanks again guys

Gaming

Programming

Best Practice NavBar?