The navigation menu that usually appears on mobile devices is surfacing on desktop screens instead - update: images now

I have recently been working on my website juniorgoldreport.com, which was created using WordPress. The plugin I am using specifically for the mobile nav bar is

The functionality and ease of use of this plugin are incredible. The setting to show the toolbar at 960px works great for me, as that is when I chose to display it. This is the only customization I have made so far.

While resizing my desktop window, the navbar appears without any issues. However, I have yet to make the necessary changes to remove the header and old nav when displaying the new one. Everything seems fine up until now.

The problem arises on mobile view, where the navbar does not appear at all. I suspect the plugin might be utilizing 

@media (max-width:960)
and not 
@media on screen and (max-device-width:960)
but I cannot say for certain. Any ideas on why this may be happening?

EDIT - I have included images to provide a clearer picture:

When resizing a desktop window, the nav bar appears:

However, the nav bar does not appear on mobile devices:

htmlcsswordpress

Answer №1

To put it simply, your website isn't truly responsive because the viewport meta tag is missing. As a result, the site displays at a fixed width of 960px on mobile devices, which causes the menu to not appear.

The issue lies in a typo within the meta tags in your website's head:

<meta name"Keywords" content="Gold reports resource stock news and top gold articles" 
<meta name="viewport" content="width=device-width">

The Keywords meta tag has two syntax errors - a missing '=' after 'name' and a missing closing >.

Due to these errors, the browser does not read the viewport tag, rendering it ineffective. This leads to the mobile viewport being scaled instead of displayed responsively. Since the viewport is shown at 960px width on mobile devices without the meta tag, the media query for responsiveness does not kick in, causing the menu to stay hidden as it would on a desktop screen.

By fixing the syntax errors in the first meta tag, the issue will be resolved:

<meta name="Keywords" content="Gold reports resource stock news and top gold articles">
<meta name="viewport" content="width=device-width">

I hope this explanation helps you solve the problem.

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

Maintain the selected list item after filtering in AngularJS

I am facing an issue with highlighting selected items in a list. I have three first names: Roy, Sam, David displayed in a ul as list items. Initially, I can toggle each li on click just fine. However, after performing a search and returning to the list, th ...

jquerycssangularjs

What is the best way for Selenium in C# to identify and locate a specific span element by its value

I've been experimenting with different locators, but I'm struggling to find a straightforward solution for identifying the dynamic number within this span using C# Selenium. Initially, my focus is just on locating the span itself. <span inven ...

c#cssseleniumcss-selectorsui-automation

"I'm facing an issue with aligning elements in my ReactJS application using CSS Flexbox. Despite setting up a flexbox layout, I am unable to

Despite setting up a flexbox to align my elements, I am struggling with vertical centering on my page. I have made sure to use a container for the page and set brute size with viewport units. Here is my sandbox: https://codesandbox.io/s/rlk3j68pmq. Belo ...

cssreactjsflexbox

Using JSON parsing to extract an integer as the key in JavaScript

I've been searching for almost 2 hours now, but I can't seem to find anyone using an integer as the key in their json object. The structure of my json object is as follows: {"342227492064425": {"added":"2020-10-04T23: ...

javascripthtmlarraysjson

Issues with the Dropdown Menu

I'm currently working on a dropdown menu and I've encountered two issues. When I hover over the links in the main navigation bar (such as 'about' and 'connect'), only the actual words are clickable, not the entire area tha ...

htmlcssdrop-down-menu

Hiding labels in an HTML document can be achieved by using CSS

Recently, I've been working on a code that relies on a specific Javascript from Dynamic Drive. This particular script is a form dependency manager which functions by showing or hiding elements based on user selections from the forms displayed. Oddly ...

javascripthtml

MUI enables the creation of a fixed vertical box anchored at the bottom of the screen

I’ve attempted the following so far: import "./styles.css"; import { Box, Typography } from "@mui/material"; import styled from "@emotion/styled"; export default function App() { const MainStyle = styled("div")(( ...

cssmaterial-ui

Is there a way to retrieve the ID by using the autocomplete feature to search for a user's first name and last name in PHP

Check out this code from index.php (all credit to the original owner): <HTML> <HEAD> <TITLE> Ajax php Auto Suggest </TITLE> <link href="css/style.css" rel="stylesheet" type="text/css"> <SCRIPT LANGUAGE="JavaScript ...

phpjquerycssajaxweb

What is the best way to implement a CSS transition in React when the state changes, the component remounts, or it re-rend

Imagine having a React functional component with some basic state: import React, { useState } from 'react' import { makeStyles } from "@material-ui/core" export default function Cart() { const [itemNumber, setItemNumber] = useState ...

cssreactjsmaterial-uicss-transitionsreactcsstransitiongroup

Obtaining data from console.log and showcasing it within a div element

Currently, I am facing a challenge where I want to retrieve the title, plot, and poster using the themoviedb API. However, I am lost on how to begin coding this. Whenever I perform a search, the information is displayed in the console log of the browser. ...

cssjsonhtmleach

Is it advisable to utilize media queries and transform: translateY(-%) to position content above the mobile keyboard?

I've been struggling for nearly a whole day and could really use some assistance. I'm having trouble understanding how chat web apps manage to work around this particular issue. There have been numerous forum posts discussing the problem: I am tr ...

javascriptcssreactjs

positioning the cursor at the end of a content-editable div

When working with a contenteditable div, I encountered several issues specific to FireFox. To address these problems, I found that appending a br tag to the end of the div was necessary. <div id="testDiv" contentEditable="true"> Hey, click the butt ...

javascripthtml

Using the following-sibling selector in Java, you can easily click on all <li> elements within a <ul> tag

I am trying to navigate through the list of li elements starting from the "Mentorship" tag link <ul _ngcontent-cwp-c18="" class="navigation clearfix"> <li _ngcontent-cwp-c18="" routerlinkactive="current" ...

javahtmlcssseleniumxpath

Centering "Label - Value" without tables in web design

It's common to have multiple labels (such as name, age, color) and a corresponding value for each one. One way to ensure that the values (for example Steve, 19, Red) all start in the same horizontal position is by organizing them in a 2 column, 3 row ...

htmlcsstabular

Guide on setting a session variable upon clicking an <a> hyperlink

Having this issue where I need to set a session variable when clicking on a regular link like: <a href="home" name="home">home</a> From my research, it seems PHP cannot capture the click event in order to set a session variable. I've he ...

phphtmlajaxsession

How to modify an array in an HTML document using BeautifulSoup

Running a Python script, I am trying to access a local HTML file containing a JavaScript array inside a script tag that needs updating. Here is the test code snippet: from bs4 import BeautifulSoup html = ''' <script> var myArray ...

pythonhtmlbeautifulsoup

Positioning an element absolutely inside a Material-UI React dialog

Currently, I am working on a Dialog component that includes a button located in the bottom right corner. When this button is clicked, it triggers the display of another div containing a list of items. However, I have encountered an issue where the list is ...

cssreactjsmodal-dialogmaterial-ui

Is it possible for me to designate a specific class for the rev value?

<a href="img1.jpg" rel="zoom-id:bike" rev="img1.jpg"> <img src="" class="img-thumb"/></a> Shown above is a snippet of HTML code. I wonder if it's possible for the attribute rev="img1.jpg" to have a class that only affects the s ...

css

Create a pair of divs on your webpage that users can drag around using HTML5

Hello to all HTML5 developers! I am currently facing an issue where I am attempting to designate two separate divs as dragable areas for incoming files. Unfortunately, it seems that only one of them can be active at a time. How can I adjust my code so th ...

javascripthtmldojo

Is there a way to occupy the extra space while working with an inline unordered list?

Using this unique CSS code, I've managed to give my unordered lists a touch of elegance: ul, li { padding: 0px; margin-left: 0px; margin-bottom: 0px; display: inline; } li { border: solid 1px #333333; margin-right: 5px; padding: 2p ...

htmlcss