Tips for hiding navigation items on mobile screens

I've been learning how to create a hamburger menu for mobile devices.

Within a navigation structure, I have three components: Logo, nav-items, and hamburger menu. Utilizing flexbox, I arranged them side by side and initially hid the hamburger menu on desktop with display: none.

Despite my attempts to experiment with position relative/absolute, I'm facing some challenges. Changing flex-direction from row to column hasn't solved the issue either.

Below is the code for the navbar:

<nav class="nav">
  <div class="brand"><h4>The Brand</h4></div>

  <div class="navigation">
    <ul class="navigation__list">
      <li class="navigation__item">
        <a href="#">Home</a>
      </li>
      <li class="navigation__item">
        <a href="#">About</a>
      </li>
      <li class="navigation__item">
        <a href="#">Services</a>
      </li>
      <li class="navigation__item">
        <a href="#">Gallery</a>
      </li>
      <li class="navigation__item">
        <a href="#">Blog</a>
      </li>
      <li class="navigation__item">
        <a href="#">Contact</a>
      </li>
    </ul>
  </div>

  <button class="hamburger">
    <span class="hamburger__box">
      <span class="hamburger__inner"></span>
    </span>
  </button>
</nav>

My goal is to have the hamburger menu appear on mobile devices. The nav items should slide off the screen and align vertically. When the hamburger is clicked, I want them to slide in from the right.

Check out the codepen for a working example: https://codepen.io/kowalik9412/pen/WNeMQrO

javascripthtmlcssmobileresponsive

Answer №1

Utilize the power of bootstrap in your project.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZwT" crossorigin="anonymous">



<nav class="navbar navbar-expand-lg navbar-light bg-white">
  <a class="navbar-brand" href="#"><h4>The Brand</h4></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
            <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
            <li class="nav-item">
        <a class="nav-link" href="#">Gallery</a>
      </li>
            <li class="nav-item">
        <a class="nav-link" href="#">Blog</a>
      </li>
            <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
        </div>
      </li>
    </ul>

  </div>
</nav>

Answer №2

To achieve the desired functionality of toggling a class in the navigation div class list, you can use the following JavaScript code:

const handleClick = () => {
  navigation.classList.toggle("show");
};

In addition, you need to include media CSS for the navigation class. Here is an example of media CSS code for achieving this:

@media (max-width: 700px) {
  .navigation.show {
    display: none;
  }
  .navigation.show {
    display: block;
  }
}

After implementing the above code, you can further customize the design according to your requirements. This code snippet will help you hide the menu initially on mobile devices and reveal it when the burger menu button is clicked.

Thank you for using this solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

NextAuth.js in conjunction with nextjs version 13 presents a unique challenge involving a custom login page redirection loop when using Middleware - specifically a

I am encountering an issue with NextAuth.js in Nextjs version 13 while utilizing a custom login page. Each time I attempt to access /auth/signin, it first redirects to /login, and then loops back to /auth/signin, resulting in a redirection loop. This probl ...

javascriptreactjsnext.jsnext-authnext.js13

Establish initial content for the specified div area

I need help setting page1.html to display by default when the page loads. Can you provide some guidance? Appreciate your assistance in advance. <head>     <title>Test</title>     <meta http-equiv="content-type" content="tex ...

javascripthtmlcssajax

Do we need to use the "new" keyword when using ObjectID in a MongoDB query

Recently, I was immersed in a Typescript web project that involved the use of MongoDB and ExpressJS. One particular task required me to utilize a MongoDB query to locate and delete a document using the HTTP DELETE method. However, during the process of exe ...

javascriptnode.jstypescriptmongodbexpress

Search through a JSON object, identify all keys that start with the same letter, and transfer them to a new JSON data structure

I am looking to iterate through my JSON data and extract all keys along with their values that start with the letters "QM". Below is an example of my JSON content: [ { MHF46: 'Ledig', MHF181: '06', QM6_QMSI2: '1899-12-30 ...

javascriptnode.jsjson

What is the best way to position my inline-flex element at the bottom of the page?

I'm trying to understand how flex-inline works. I want to make the height expand to 100% and reach the bottom of the screen without overcrowding it with content. html,body{margin:0;padding:0} body{background:black;} #sidebar{ display: inline-f ...

css

Guide to making a button in jQuery that triggers a function with arguments

I've been working on creating a button in jQuery with an onClick event that calls a function and passes some parameters. Here's what I have tried so far: let userArray = []; userArray['recipient_name'] = recipient_name.value; userArray[ ...

javascripthtmljquerydatatables

Conceal elements within a div using the 'elementFromPoint' function

In my HTML, I have a div that contains an icon and some text. I want to make it so that when I hover over the div with my mouse, only the div itself is visible to the 'elementFromPoint' function. How can I achieve this? Here is an example of th ...

javascripthtmlcss

Learn the trick to make this floating icon descend gracefully and stick around!

I'm trying to create a scrolling effect for icons on my website where they stay fixed after scrolling down a certain number of pixels. I've managed to make the header fixed after scrolling, but I'm unsure how to achieve this specific effect. ...

javascriptjqueryhtmlcssskrollr

Why does Cloudinary fail to delete the tmp folder it creates after finishing the upload process?

Recently, I've been working on implementing an upload Post feature for my app. The process involves submitting a file from the frontend, sending it to the backend, and then uploading it to Cloudinary's cloud servers. However, before the upload to ...

javascriptnode.jsreactjsexpresscloudinary

Incorporate clickable selection buttons into an HTML layout without disrupting the placement of existing

I have set up an HTML document that features a collection of buttons enclosed within a DIV id labeled 'buttons'. My objective is to introduce a sort by button into the mix without disrupting the current layout. I attempted to achieve this goal by ...

htmlcssbuttonselect

Exploring elements within a JavaScript array

I'm struggling to retrieve model objects from my view model. It seems like a JavaScript/KnockoutJS familiarity issue, so any guidance is welcomed. Here is the code snippet: <!-- VIEW --> <select data-bind="options: allTypes, ...

javascriptmvvmknockout.js

Converting JQuery Object (Ajax-response) to an Array Containing Keys and Values

When I make an $.ajax request, the response I receive looks like this: https://i.sstatic.net/UfnfQ.jpg (please don't worry about the Russian symbols, they are just strings of text:)) I am aware that when PHP sends the request, it is in a simple arr ...

javascriptjqueryarraysobject

Determining the Right Version of a Framework in npm: A Guide

One common issue I encounter is the uncertainty of which versions of npm, Ionic, and other tools I should have installed. It often goes like this: "Oh, there's a new version of the Ionic CLI out. Let's update." I install CLI v3.9.0. ...

javascriptnode.jsangularnpmionic3

Using Vue.js to dynamically append varying inputs upon user interaction

When I select an option, I want to display different types of inputs based on the selected option. For Example: Select input -> show input fields Select textarea -> show text areas Select boolean -> show radio buttons The Code This is where ...

javascriptvue.jsvuejs2

Node: How can I retrieve the value of a JSON key that contains a filename with a dot in

I have a JSON file named myjson.json, with the following structure: { "main.css": "main-4zgjrhtr.css", "main.js": "main-76gfhdgsj.js" "normalkey" : "somevalue" } The purpose is to link revision builds to their original filenames. Now I need to acce ...

javascriptjsonnode.jsrequire

What is the best approach to displaying child nodes in JsTree when they are only generated after the parent node is expanded?

Dealing with multiple children nodes under a parent can be tricky. For instance, when trying to open a specific node using $("#jstree").jstree("open_node", $('#node_27'));, you may encounter an issue where the parent node is not initially open, c ...

javascriptjstree

Toggle the row to expand or collapse upon clicking it

After extensive research, I have been unable to get the row expansion and collapse feature to work in my script. Here is my current script: <thead> <tr> <th width="5" class="cb"><input type="checkbox" id="cbcall" /& ...

javascriptjquery

lines stay unbroken in angular

I am encountering an issue when I execute the following code: DetailDisplayer(row) : String { let resultAsString = ""; console.log(row.metadata.questions.length); (row.metadata.questions.length != 0 )?resultAsString += "Questions ...

htmlangulartypescript

Changing a String into an XML Document using JavaScript

Found this interesting code snippet while browsing the jQuery examples page for Ajax: var xmlDocument = [create xml document]; $.ajax({ url: "page.php", processData: false, data: xmlDocument, success: someFunction }); ...

javascriptjqueryxmldom

Working with the Enter Key in Vue.js

I am faced with a challenge involving a text field and a button setup. By default, the button is set to submit a form when the Enter key is pressed on the keyboard. My goal is to capture each key press while someone is typing in the text field, particularl ...

javascriptvue.js