The hamburger icon on my website is not appearing even after implementing the media query

Despite adjusting the media query, I'm facing an issue with displaying the hamburger menu. Although the navbar links disappear correctly, the menu itself refuses to show up.

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --main-color: #ff702a;
  --text-color: #fff;
  --bg-color: #1e1c2a;
  --big-font: 5rem;
  --h2-font: 2.25rem;
  --p-font: 0.9rem;
  --bg-hover: #2f2b41;
}

body {
  background-color: var(--bg-color);
  font-family: "Poppins", sans-serif;
  height: 2000px;
}

body .navbar {
  background-color: grey;
  display: flex;
  justify-content: space-between;
  height: 80px;
  position: fixed;
  width: 100%;
}

body .navbar .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30px;
}

body .navbar .logo a {
  color: var(--main-color);
  text-decoration: none;
  font-weight: 900;
  font-size: 2rem;
  cursor: pointer;
}

body .navbar .hamburger-menu {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

body .navbar .hamburger-menu .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

body .navbar .navbar-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-right: 25px;
  min-width: auto;
}

body .navbar .navbar-menu li {
  list-style: none;
  opacity: 0.8;
  transition: 0.4s ease;
  border-radius: 50px;
}

body .navbar .navbar-menu li a {
  text-decoration: none;
  color: white;
  font-size: 1.2rem;
  padding: 0.8rem;
}

body .navbar .navbar-menu li:hover {
  opacity: 1;
  background-color: var(--bg-hover);
}

@media (max-width: 760px) {
  .hamburger-menu {
    display: flex;
  }
  .navbar-menu li {
    display: none;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header class="navbar">
    <div class="logo">
      <a href="#">MyWeb</a>
    </div>

    <a href="#" class="hamburger-menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>

    <ul class="navbar-menu">
      <li><a href="home">Home</a></li>
      <li><a href="about">About</a></li>
      <li><a href="menu">Menu</a></li>
      <li><a href="services">Services</a></li>
      <li><a href="contact">Contact</a></li>
    </ul>
  </header>


  <script src="script.js"></script>
</body>

</html>

htmlcssmedia-queriesnavbarhamburger-menu

Answer №1

Your media query styles that show your hamburger menu are not being applied due to lower specificity.

/* Using two class selectors */
body .navbar .hamburger-menu {
  display: none;
}

@media (max-width: 760px) {
  /* Using one class selector */
  .hamburger-menu {
    display: flex;
  }
}

I have converted your SCSS into CSS for both the question and this answer. Remember, excessive nesting can lead to issues like this - it's better to remove unnecessary nesting!

To solve the problem, clean up your code and simplify the structure.

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --main-color: #ff702a;
  --text-color: #fff;
  --bg-color: #1e1c2a;
  --big-font: 5rem;
  --h2-font: 2.25rem;
  --p-font: 0.9rem;
  --bg-hover: #2f2b41;
}

body {
  background-color: var(--bg-color);
  font-family: "Poppins", sans-serif;
  height: 2000px;
}

body .navbar {
  background-color: grey;
  display: flex;
  justify-content: space-between;
  height: 80px;
  position: fixed;
  width: 100%;
}

body .navbar .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30px;
}

body .navbar .logo a {
  color: var(--main-color);
  text-decoration: none;
  font-weight: 900;
  font-size: 2rem;
  cursor: pointer;
}

body .navbar .hamburger-menu {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

body .navbar .hamburger-menu .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

body .navbar .navbar-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-right: 25px;
  min-width: auto;
}

body .navbar .navbar-menu li {
  list-style: none;
  opacity: 0.8;
  transition: 0.4s ease;
  border-radius: 50px;
}

body .navbar .navbar-menu li a {
  text-decoration: none;
  color: white;
  font-size: 1.2rem;
  padding: 0.8rem;
}

body .navbar .navbar-menu li:hover {
  opacity: 1;
  background-color: var(--bg-hover);
}

@media (max-width: 760px) {
  body .navbar .hamburger-menu {
    display: flex;
  }
  .navbar-menu li {
    display: none;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <!-- HEADER -->

  <header class="navbar">
    <div class="logo">
      <a href="#">MyWeb</a>
    </div>

    <a href="#" class="hamburger-menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>

    <ul class="navbar-menu">
      <li><a href="home">Home</a></li>
      <li><a href="about">About</a></li>
      <li><a href="menu">Menu</a></li>
      <li><a href="services">Services</a></li>
      <li><a href="contact">Contact</a></li>
    </ul>
  </header>

  <!-- SOMETHING -->

  <script src="script.js"></script>
</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

What could be causing the div to not respond to ngAnimate?

Recently, I encountered an issue with adding animations to a list of <div>'s in my webapp. After incorporating ngAnimate into the app.js file and including ng-animate="'animate'" in the <div>, I was disappointed to find that the ...

javascripthtmlcssangularjs

The area surrounding inline content, both above and below

Can you explain the space above and below inline content? This phenomenon can be seen here: http://jsbin.com/vertical-spacing-weirdness/ If you look closely, there is a white area between the div/table and the span even though the span does not have ...

htmlcssxhtml-1.0-strictxhtml-transitional

Unleash the power of attribute selectors in a SASS/SCSS list variable: a comprehensive guide!

This is a sample code snippet: $list: ( input[type="text"], input[type="name"], input[type="email"], textarea, select[multiple] ) !default; @each $value in $list { ...

csssass

What is the best way to ensure a div is always scrollable?

I am currently working with Angular 4 and Bootstrap 4 (alpha 6). I have implemented ngx-infinte-scroll to fetch data from the server when the user scrolls to the top or bottom of the div. The issue I am facing is that the user can only scroll when there ar ...

htmlcsstwitter-bootstrapangular

Assign the value/text of a div element by using JavaScript/jQuery within a PHP loop

I'm struggling to figure out how to set the value/text of a div using javascript/jquery inside a loop. Can anyone offer some guidance on this issue? Goals: Extract data from a database. Use javascript/jquery to assign the extracted data to an eleme ...

javascriptphpjqueryhtml

What causes the variation in results when I input CSS directly into the head section versus linking it from a separate .css file?

As a beginner, I am facing an issue with my CSS. When I directly insert the CSS into the head of my .html file, everything looks perfect. However, when I link my .css file into the head, the very first word ("Holy") does not display properly. I have double ...

htmlcss

What is the best way to track down the source of a CSS rule?

A website built on .asp was passed down to me, and I was tasked with reorganizing forms in tables to the sidebar. Most pages were successfully updated, except for one stubborn page that seems to be ignoring my CSS changes and using values from an unknown s ...

css

What Could Be Causing My Webfonts to Be Inaccessible on Windows Devices and iPhones?

I recently created a simple holding page on www.tomrankinmusic.com The Webfonts I embedded in the page display correctly in the latest versions of Firefox, Safari, and Chrome on Mac OSX Lion 10.7.4 but do not show up in Chrome and IE6 on Windows XP Pro, d ...

htmlcssfontswebfonts

How does using position: fixed affect width in React components?

Can someone explain why my sidebar width is reduced when I apply position: fixed? Here is the code snippet: https://codesandbox.io/s/1yr3nlqp74 Steps to reproduce the bug: Open the code in a new window (full screen) Observe the picture before and after ...

reactjscssreact-reduxmaterial-ui

Transitioning opacity and visibility in iOS CSS styling

Check out this test on a desktop browser by visiting the following link (JSFiddle): a { background: gray; display: block; margin: 100px; padding: 100px; } a span { opacity: 0; -webkit-transition: 0.5s; visibility: hidden; } a:hover span { ...

cssiosmobilesafaricss-transitions

Apply a watermark specifically to fancybox for images in galleries, excluding non-gallery items

I recently encountered an issue with a FancyBox image gallery on my webpage. I wanted to add a watermark to the gallery items, so I followed an example from the FancyBox page at http://jsfiddle.net/w5gQS/. beforeShow: function () { $('<div class=" ...

javascriptjqueryhtmlcssfancybox-2

I am having trouble viewing elements located below a div that I created using CSS

Currently, I am working on creating a portfolio page where the initial page opens with a height of '100vh' and width of '100%', which seems to be functioning correctly. However, I am facing an issue where I am unable to scroll down to v ...

htmlcssreactjs

Tips for maintaining the navigation tab's consistent appearance

Whenever I click a button on the sidebar and the current tab is the second tab, the navigation bar switches to display the first tab. How can I prevent this switch and keep the second tab displayed when clicking a button on the sidebar? The code for this ...

javascriptjqueryhtmlcssangularjs

Bootstrap 4: Concealed and Revealed Columns?

Is anyone else experiencing an issue where xs is hidden in xs views? I have a hunch it might be due to changes in Bootstrap v4, but I'm curious if there's a way to still make it work without delving into the CSS. My current setup uses the default ...

csstwitter-bootstrapbootstrap-4

displaying the identical image from various perspectives

I have an arrow image that I need to display in different angles - top, left, bottom, right. I was considering what would be the best approach: 1: Changing the image direction via CSS and loading the main image <img src="a.png"> <img src="a.png" ...

androidhtmlcssoptimization

Tips for querying multiple elements that share a common ID and verifying if the input has been modified

I have a series of text inputs that share a common id prefix but differ slightly at the end. Whenever a user enters text in any of these input fields, I want to trigger a function. Currently, I have this functionality implemented with the following code: ...

javascriptjqueryhtmldom

I find myself unable to write any code using my Visual Studio Code

I'm facing an issue where I can't write any code on my Visual Studio Code. Despite following all the recommendations on the official website, I haven't been able to resolve the problem. More information here Here are the changes I have tri ...

pythonhtmllinuxubuntuvisual-studio-code

How to set textboxes as read-only depending on the drop-down choice?

After developing some scripts to automatically populate the data-length and data-width in textboxes based on a dropdown selection, I now face the challenge of making the .width and .length textboxes readonly depending on the selected dropdown option. Is t ...

javascriptjqueryhtmlcss

Expanding the axes using Google Charts

Seeking to Expand Y-Axis I am attempting to stretch the Y-axis so that it counts up to 300 instead of just 100. The issue arises when I adjust the Y-axis to reach 300, as the values remain in the same position as they did when counting to 100. Fo ...

htmlcssgoogle-visualization

The requested resource at http://js:port/socket.io/1/ could not be located (Error 404

Having trouble connecting with Socket.io. This is the server-side code: function chatserver(){ var express = require('express'), app = express(), server = require('http').createServer(app).listen(app.get('port'),function ...

javascripthtmlnode.jssocket.io