The phone menu fails to appear after clicking the hamburger icon

Recently, I was in the process of developing a website using HTML and CSS. I had successfully implemented a responsive navigation bar with a hamburger menu, but when it came time to add content to the page, the hamburger menu disappeared. While the transitions were still evident, I wanted the hamburger menu to remain visible without disrupting the rest of the page's content.

Code

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: #2f2f42;
}

nav {
  display: flex;
  height: 90px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 100px;
  flex-wrap: wrap;
}

nav .logo {
  font-size: 20px;
  font-weight: bold;
  color: teal;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

nav ul li {
...
</html>

htmlcssweb-applicationsnavbar

Answer №1

To reveal your hidden nav ul, simply apply z-index: 9999;. The issue may be due to it being obscured by the overflow of its parent block.

For a quick fix, try adding background-color: #2f2f42; to your ul.

DEMO

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

/* CSS code goes here */

@media (max-width: 920px) {
  /* Additional responsive CSS rules go here */
}

.content {
  /* Styling for content area */
}

/* More styling rules here */

footer {
  /* Footer styles */
}

#foo {
  /* Styles for footer container */
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Navigation Menu</title>
</head>

<body>
  <nav>
    <div class="logo">Logo img</div>
    <input type="checkbox" id="click">
    <label for="click" class="menu-btn">
      <i class="fas fa-bars"></i>
    </label>
    <ul>
      <li><a class="active" href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <div class="content">
    /* Content goes here */
  </div>
  <div id="foo">
    <footer>
      /* Footer content */
    </footer>
  </div>
</body>

</html>

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

Center unordered lists with varying numbers of items

I am currently facing a challenge while attempting to create four lists with different numbers of items and align them properly on my webpage. After applying inline-block to the ul class, I encountered issues with alignment as illustrated below: https:// ...

htmlcss

Trouble with displaying images in a responsive flex box

I've been trying to make the plant image fit inside the flex boxes with a responsive height and width as the screen size changes, but it doesn't seem to be working. In addition, it's changing the shape of the flex box to accommodate the imag ...

htmlcssflexbox

Linking a watcher property to control the opacity value of inline styles

Struggling to connect the opacity of a div with the value of a slider. <div class="container" v-bind:style="opacity">test content</div> Despite my efforts, I can't seem to make the binding work correctly. When I check in the developer to ...

javascripthtmlcssvue.js

What is the best way to automate the stylus pen for a static web page?

I am currently using Stylus to generate my CSS file. To take advantage of the CSS3 vendor prefix and other features, I have incorporated the nib package. My website is static and does not rely on Express or any server. Now, I need to automatically run the ...

jquerycssstylus

Issue with Bootstrap dropdown menu not functioning properly [HTML]

I recently downloaded Bootstrap and included the necessary scripts in my code. However, I am facing an issue where a drop-down menu is not working properly. Despite no errors showing up in the console and everything else functioning correctly, this specifi ...

javascripthtmljquerybootstrap-4

Creating a CSS sidebar that adjusts its margin as you zoom in and out

I am currently working on designing a side bar that will feature buttons and other elements with text on the opposite side. Initially, when you open the page, the sidebar occupies 39% of the left side, which is functioning correctly. However, when zooming ...

htmlcssresize

What is the solution for resolving the "cannot resolve" issue in CSS for an Angular project?

During a small project I was working on, I decided to add a background image to another image using CSS. Here is the code snippet: .child2 img { width: 200px; height: 200px; border-radius: 50%; background-image: url('./assets/images/imageb ...

cssangular

Creating a stylish design: integrating a progress bar within a card using Bootstrap 5

I'm currently delving into the world of bootstrap and I'm curious about how to incorporate a progress bar into a card layout to enhance my design skills. I experimented with inline-block and inline display properties, but they didn't yield t ...

htmlcssflexboxbootstrap-5

Experiencing difficulties with utilizing height percentages for CSS divs

Despite encountering similar issues with others, I am still unable to resolve the problem on my own. Your assistance is greatly appreciated. Currently, I am developing a guestbook in PHP using an HTML template. The issue I am facing is that the div elemen ...

phphtmlcss

Two sidebar panels displayed in the same tab on the Navbar page

In the Shiny navbarpage, is it possible to add 2 sidebar panels with space in between, as illustrated in the diagram linked below? Can we use HTML tags to achieve this spacing? https://i.sstatic.net/jXBXo.png Below is the code for it (Essentially, I requ ...

htmlcssshiny

Toggle the visibility of three different div elements using JavaScript on mouseover

Trying to create three image links that display different divs when onMouseOver. <script type="text/javascript> function toggleVisibility(divid) { if (divid==="1"){ document.getElementById("1b").style.visibility = "visible"; document.getElem ...

javascripthtmlcss

"Troubleshooting issue in Django 1.6.2 where CSS styles are not being applied to

I am encountering an issue with this code and would greatly appreciate some assistance. The base.html file contains a {% block content %}{% endblock %}. I have created a Signup.html file structured like this: {%extends 'base.html'%} {% block co ...

pythonhtmlcssdjangohttp-redirect

Hover Problem with HTML Image Tag

Having trouble understanding why the images are not changing color on hover. The images are svg files and should be able to adopt the color. Here is the code snippet: HTML: <div class="toolTile col-md-3"> <a href="#/cards"> <im ...

htmlcssimagesvg

techniques for accessing HTML source code through an AJAX call

I am trying to retrieve the HTML source of a specific URL using an AJAX call, Here is what I have so far: url: "http://google.com", type: "GET", dataType: "jsonp", context: document.doctype }).done(function ...

javascriptjqueryhtmlajax

The synchronization of data from $resource to be called from HTML is not functioning properly

Inside the controller, I am able to print the array returned by vm.getProduct(). However, this array is not available in the HTML section. Resource: var DataProvider = function ($resource) { return $resource('&apo ...

javascripthtmlangularjs

retrieving the site's favicon icon

Currently, I am attempting to extract favicons from website URLs using the HtmlAgilityPack library. While I have been successful in retrieving some favicons, there are still some that remain elusive. I suspect that the inconsistency lies in the implementat ...

javascriptjqueryhtmlasp.netfavicon

What could be causing the page to automatically scroll to the bottom upon loading?

My experience with this bootstrap/jquery page in Firefox (v39, latest updates installed) has been unusual as it always seems to jump to the bottom of the page upon clicking. Upon inspecting the code, I couldn't find any JavaScript responsible for thi ...

javascriptjquerycsstwitter-bootstrap

Do we actually need the role attributes "radiogroup" and "radio"?

Some ARIA tutorial websites use non-semantic markup and javascript to demonstrate the use of role="radiogroup" and role="radio", as shown in the example below: <ul role="radiogroup"> <li tabindex="-1" role="radio" aria-checked="false"> ...

htmlradio-buttonwai-aria

What is the best way to create an Information Box that slides out from the right of a link when hovered over?

I am looking for some code to create an interactive feature on my website. Essentially, when a user hovers over a link in my navigation bar, I want a small box to slide out to the right of the link providing more information about it. If feasible, I woul ...

javascriptcsshtmlslide

Don't forget to keep in mind the importance of the "Radio" value when you are submitting a form to yourself on

When dealing with a text input, you can remember the value entered by the user if the form is submitted to itself. This technique comes in handy for tools like a picture upload tool, where the user's input needs to be saved to avoid retyping after upl ...

phpjavascripthtmlforms