Question 189213 in Html Question posted in
Some basic documentation can be found here.

Html – How can I implement a responsive navigation menu using CSS media queries and JavaScript?

I’m working on a web project and I want to create a navigation menu that adapts to different screen sizes. I want it to collapse into a hamburger menu on smaller screens and expand into a full menu on larger screens. I’ve tried a few approaches using CSS media queries and JavaScript, but I’m encountering some issues with the responsiveness and functionality.

I’ve attempted to use media queries in CSS to hide and show different menu elements based on screen size. Additionally, I’ve added some JavaScript logic to handle the toggle functionality of the hamburger menu. However, the menu behavior is not as expected on certain devices and the responsiveness is inconsistent.

Tags:

2

Answers


  1. 0

    There are many examples on the web
    i can share a simple solution:

    header {
  width: 100%;
  display: inline-block;
  background-color: #404040;
  color: #fff;
}

.hamburger {
  height: 20px;
  width: 20px;
  padding: 20px;
  float: right;
  cursor: pointer;
}

.hamburger:before {
  content: "";
  display: block;
  background-color: #f3f3f3;
  width: 100%;
  height: 4px;
}

.hamburger:after {
  content: "";
  display: block;
  background-color: #f3f3f3;
  width: 100%;
  height: 4px;
  margin-top: 4px;
  box-shadow: 0px 8px 0 #f3f3f3;
}

nav {
  background-color: #2b2b2b;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  clear:both;
  transition: max-height .3s cubic-bezier(0.63, 0, 0.25, 1);;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}

nav li {
  display: block;
  margin: 0;
  text-align: center;
}

nav a {
  color: white;
  display: block;
  padding: .4em;
}

header input[type="checkbox"]:checked ~ nav {
  max-height: 150px;
  border-bottom: #404040 5px solid;
}

header a:hover,
header a:focus,
header label:hover,
header label:focus {
  background-color: #191919;
}

@media (min-width: 700px) {
  .hamburger {
    display: none;
  }
  nav {
    background: transparent;
    float: right;
    border: 0 !important;
    max-height: none;
  }
  nav ul, nav li, nav li a {
    display: inline-block;
  }
  nav a {
    display: inline-block;
    padding: 15px 1em;
  }
}

.hidden {
  position: fixed;
  top: -100%;
  left: -100%;
}
    <header>
  <span>Logo</span>
  <label class="hamburger" for="nav-toggle"></label>
  <input id="nav-toggle" type="checkbox" class="hidden" />
  <nav>
    <ul>
      <li><a href="#">Link One</a></li>
      <li><a href="#">Link Two</a></li>
      <li><a href="#">Link Three</a></li>
      <li><a href="#">Link four</a></li>
      <li><a href="#">Link five</a></li>
      <li><a href="#">Link six</a></li>
      <li><a href="#">Link seven</a></li>
    </ul>
  </nav>
</header>

    Source:author

    Login or Signup to reply.
  2. 0

    You should try to update your question with the html, javascript, and css code for the community to analyse your code, find where in the code is the responsiveness issue and give you a better suited answer.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search