'How can I use javascript to hide by default the navigation links in my navbar on small screens?

I set up my navber using tailwind css and was able to make it responsive. When viewed on a smaller screen the navigation links are displayed underneath each other in a flex block kind of way. However when viewed in a mobile viewport the navigation links are showing by default. Implimented a button that can be clicked to show and hide it but how can I use javascript to actually write the code for that to work? Here is a snippet of my code:

<script src="https://cdn.tailwindcss.com"></script>
<!--Navbar-->
    <nav id="navbar" class="fixed inset-x-0 flex flex-center justify-between flex-wrap p-5 lg:mx-10 lg:mt-5 shadow-xl rounded-lg">
      <div class="flex items-center flex-shrink-0 text-green-600 mr-6">
        <img class="fill-current h-8 w-8 mr-2" src="images/Logo.svg" alt="Logo" width="20">
        <span class="font-bold text-2xl tracking-tight">First Last</span>
      </div>
      <div class="block md:hidden">
        <button class="flex items-center px-3 py-2 border rounded hover:text-green-300 hover:border-green-300">
          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
      </div>
      <div class="w-full block md:flex md:items-center md:w-auto">
        <div class="text-sm md:flex-grow">
          <a href="#school" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">About</a>
          <a href="#skills" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Skills</a>
          <a href="#projects" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Projects</a>
          <a href="#experience" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Experience</a>
        </div>
      </div>
    </nav>

Image of Navbar seen from the mobile view

javascripthtmlcsstailwind-css


Solution 1:[1]

  • Change block md:flex to hidden md:flex which will hide the menu on mobile screens.
  • You can then use Element.classList.toggle to toggle the hidden class when the button is clicked on mobile screens.

Try this

document.addEventListener('DOMContentLoaded', function(){
    let menu = document.getElementById('navbar-menu');

    document.getElementById('navbar-toggler').addEventListener('click', event => {
        menu.classList.toggle('hidden')
    })
})
<script src="https://cdn.tailwindcss.com"></script>
<!--Navbar-->
<nav id="navbar" class="fixed inset-x-0 flex flex-center justify-between flex-wrap p-5 lg:mx-10 lg:mt-5 shadow-xl rounded-lg">
    <div class="flex items-center flex-shrink-0 text-green-600 mr-6">
        <img class="fill-current h-8 w-8 mr-2" src="images/Logo.svg" alt="Logo" width="20">
        <span class="font-bold text-2xl tracking-tight">First Last</span>
    </div>
    <div class="block md:hidden">
        <button class="flex items-center px-3 py-2 border rounded hover:text-green-300 hover:border-green-300" id="navbar-toggler">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
    </div>
    <div class="w-full hidden md:flex md:items-center md:w-auto" id="navbar-menu">
        <div class="text-sm md:flex-grow">
            <a href="#school" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">About</a>
            <a href="#skills" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Skills</a>
            <a href="#projects" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Projects</a>
            <a href="#experience" class="block mt-4 md:inline-block md:mt-0 hover:text-green-300 mr-4">Experience</a>
        </div>
    </div>
</nav>

Solution 2:[2]

You can use Javascript to select the element by its id and add or remove classes/styles to achieve the toggle effect.

ex:

const navbar = document.querySelector("#navbar");
if (navbar.classList.contains("something"){
   someelement.style.display = "none";
   anotherElement.style.display = "block";
   navbar.classList.add("someClass");
}

Here is an example codepen for the same. https://codepen.io/ljc-dev/pen/MWoRayy

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 saras reng

Related Questions