The navigation menu on major browsers, such as Google Chrome, is malfunctioning and not responding as expected

Hope you're having a wonderful day! ☺️

I recently created a responsive navigation menu bar for mobile devices, but it seems to be malfunctioning on some major browsers like Google Chrome and Bing. Instead of displaying the mobile view, it shows the desktop version.

If anyone has any ideas on how to fix this issue, I would greatly appreciate the help!

function toggleMenu() {
  var menu = document.getElementById("menu");
  menu.classList.toggle("open");
}

// Close the menu when a menu item is clicked (optional)
var menuItems = document.querySelectorAll(".menu li a");
for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener("click", function() {
    var menu = document.getElementById("menu");
    menu.classList.remove("open");
  });
}
/* Responsive navigation styles */

nav {
  background-color: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: bold;
}

.menu {
  display: flex;
  list-style: none;
}

.menu li {
  margin-right: 20px;
}

.menu li a {
  text-decoration: none;
  color: #333;
}

.menu-toggle {
  cursor: pointer;
  font-size: 20px;
}

/* Media queries */

@media only screen and (max-width: 768px) {
  .menu {
    display: none;
  }

  #menu.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 20px;
  }
  
  #menu.open li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
<header>
  <nav>
    <div class="logo">Maxin Solutions</div>
    <div class="menu-toggle" onclick="toggleMenu()">&#9776;</div>
    <ul class="menu" id="menu">
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About Us</a></li>
    </ul>
  </nav>
</header>

Any suggestions or tips on how to resolve this issue are welcome. I have tried adjusting the media screen pixel settings without success.

javascripthtmlcssnavigationmenubar

Answer №1

Start by hiding your toggle button initially and only display it on mobile view.

Solution

.menu-toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
 
  .menu-toggle {
    display: block;
  }
}

Example

function toggleMenu() {
  var menu = document.getElementById("menu");
  menu.classList.toggle("open");
}

// Close the menu when a menu item is clicked (optional)
var menuItems = document.querySelectorAll(".menu li a");
for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener("click", function() {
    var menu = document.getElementById("menu");
    menu.classList.remove("open");
  });
}
/* Responsive navigation styles */

nav {
  background-color: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: bold;
}

.menu {
  display: flex;
  list-style: none;
}

.menu li {
  margin-right: 20px;
}

.menu li a {
  text-decoration: none;
  color: #333;
}

.menu-toggle {
  display: none;
  cursor: pointer;
  font-size: 20px;
}

/* Media queries */

@media only screen and (max-width: 768px) {
  .menu {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  #menu.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 20px;
  }
  
  #menu.open li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
<header>
  <nav>
    <div class="logo">Maxin Solutions</div>
    <div class="menu-toggle" onclick="toggleMenu()">&#9776;</div>
    <ul class="menu" id="menu">
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About Us</a></li>
    </ul>
  </nav>
</header>

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 is the method for accessing the req, res objects within the callback functions?

One of my preferences is to access the req, res, next objects outside of the middleware function. For instance, in a sample middleware file called sample.js: var app = express(); .... ..... .... var updateUserInput = { init:function(){ get_data ...

javascriptnode.jsexpress

Using PHPMailer to send attachments uploaded through a form

I have a HTML form where users can select an attachment file (such as a PDF) and I want to send that file via email to a specified destination. While I am able to successfully send all other inputs through email, I'm having trouble with the attachmen ...

phphtmlphpmailer

Implementing OutlinePass from Three.js in React

I am attempting to implement the Post-processing Outline Thee.js example in a React environment with server-side rendering. The challenge I am facing revolves around lines 47 and 280 in the example: <script src="js/postprocessing/OutlinePass.js">< ...

javascriptnode.jsreactjsthree.js

Customizing Material UI CSS in Angular: A Guide

Recently, while working with the Mat-grid-tile tag, I noticed that it utilizes a css class called .mat-grid-tile-content, which you can see below. The issue I am encountering is that the content within the mat-grid-tile tag appears centered, rather than f ...

cssangulartypescriptmaterial-ui

Reactjs is retrieving several items with just one click on individual items

I am having trouble getting only a single sub-category to display. Currently, when I click on a single category, all related sub-categories are showing up. For example, in the screenshot provided, under the Electronic category, there are two subcategories: ...

javascriptreactjsreact-hooksnext.js

Error: Unable to use 'UserContext' until it has been initialized - React

I am attempting to establish a UserContext that can be accessed by all class components within the React application. However, I am encountering the following error message. ReferenceError: Cannot access 'UserContext' before initialization App.j ...

javascriptreactjscomponentsreact-propsreact-context

What is the process for submitting a form from a different webpage?

I am working on a website with two pages. Each page has a header with navigation tabs to move between page 1 and page 2. When a tab is clicked, I want the selected page to re-POST to the server for a quick refresh before displaying. There is a form on e ...

javascriptjqueryhtmlforms

Unlock the power of nested dynamic content creation with JavaScript

Every time I attempt to use getelementbyid on a dynamically loaded div, I receive null as the result. This occurs even after trying both window.onload = function () { and $(window).load(function() { index.html: <main > <div id="main-div"> ...

javascriptjqueryhtmldynamicgetelementbyid

javascript path as the first argument and callback as the last argument

Currently, I am in the process of creating a wrapper function for expressjs's app.get method. In these methods such as get, you can provide the path, some options, and then the callback. However, it is possible to omit the options and still have it w ...

javascriptnode.jsargumentsexpress

What could be causing the visibility issue with my navigation items in the bootstrap navigation bar?

Currently, I am experiencing a puzzling issue with the navigation bar on my live website. The navigation items seem to flicker for a brief moment and then disappear entirely. This unexpected behavior is certainly causing me some concern. I crafted the us ...

javascripthtmlcssweblogic

What exactly is the function of $fix-mqs within the IE Sass mixins created by Jake Archibald?

I'm really struggling to understand the purpose behind using $fix-mqs in the mentioned link: Although I can grasp how the rest of the mixin functions, this particular part has me stumped. In a project where I've utilized this pattern, everything ...

cssinternet-explorersass

Attempting to grasp the concept of ternary condition logic in this specific scenario

Recently, I delved into a code kata involving an array of football scores such as: ["3:1", "2:2"] (The total points here would be 4, 3 + 1) After applying certain rules and summing up the points, I came across an interesting solution: const points = g ...

javascriptarraysecmascript-6reduce

Clicking inside the bootstrap modal does not trigger the ng-click event

I encountered an issue while trying to implement the "ng-click" function from Angular into an HTML page. It worked initially, but when I tried using the same "ng-click" function within a Bootstrap modal, the code stopped functioning. Can anyone explain why ...

htmlangularjstwitter-bootstrapangularjs-scope

Scraping Information on Pokemon from the Web

I am currently researching the number of moves each Pokemon from the first generation could learn. After some exploration, I came across a helpful website that provides this information: The website lists 151 Pokemon, and for each of them, their move set ...

htmlrweb-scraping

Colorful radial spinner bar

I am interested in replicating the effect seen in this video: My goal is to create a spinner with text in the center that changes color, and when the color bar reaches 100%, trigger a specific event. I believe using a plugin would make this task simpler, ...

javascriptcssionic-frameworkspinner

Angular seems to be experiencing issues with maintaining context when executing a function reference for a base class method

Imagine we have CtrlOne that extends CtrlTwo, with a componentOne instantiated in the template of CtrlOne. Here is some code to illustrate the issue: class CtrlOne extends CtrlTwo { constructor() { super(); } } class CtrlTwo { sayMyName(name: st ...

javascriptangularjstypescript

Next.js triggers the onClick event before routing to the href link

Scenario In my current setup with Next.js 13, I am utilizing Apollo Client to manage some client side variables. Objective I aim to trigger the onClick function before navigating to the href location. The Code I'm Using <Link href={`/sess ...

javascriptnext.jsapollo-client

"Struggling with a Bootstrap problem in my Accordion Table

I'm working with a Bootstrap table that includes an accordion feature. My goal is to have the second row hidden by default. However, when I click to reveal it, the table shifts. How can I smoothly animate the opening without causing any shifting? ...

jquerycssbootstrap-5bootstrap-tablebootstrap-accordion

Tips for creating responsive designs with specific media queries for various device sizes

I am looking to create a responsive website using media queries and have already created different media queries for mobile, tablets, and desktops. However, I am unsure if I should be writing the same CSS code multiple times for various device sizes, such ...

htmlcssmedia-queries

What are some ways to enhance the functionality of the initComplete feature in Dat

$('#example').dataTable( { "initComplete": function(settings, json) { alert( 'DataTables has finished its initialisation.' ); } } ); Is there a way to extend the initComplete function for other languages? $.extend( true, $.f ...

javascriptjqueryjquery-pluginsdatatables