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: https://i.sstatic.net/R31Fe.png

However, the nav bar does not appear on mobile devices: https://i.sstatic.net/38cye.jpg

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">

https://i.sstatic.net/yWzm3.png

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

What steps can be taken to turn off specific warning rules for CSS mode in ACE editor?

Utilizing the Ace Editor (through Brace and React-Ace) is a key aspect of my project. In our implementation, we specify the editor's mode as "css" and integrate it into our webpage. While this setup functions correctly, we have observed that some of ...

javascriptcssace-editorreact-ace

Integrating jQuery into the functions.php file of a Wordpress

I have been using a jQuery script in Unbounce and now I want to implement it on my Wordpress page. I believe I will have to insert this into the child theme functions file, but I know it requires some PHP code as well. As I am still fairly new to this proc ...

javascriptphpjquerywordpress

Contrast between using tbody td:nth-of-type(3){ border-bottom-color: transparent; } and tr.noborder td{ border-bottom: transparent; } within CSS styling

First Situation: h1{ text-align: center; } td{ width: 100px; height: 100px; border-right: 1px solid gray; border-bottom: 1px solid gray; } table{ margin: 0px auto 0px auto; } tbody td:nth-of-type(3){ border-right-color: transparent; } tbody tr:nt ...

htmlcss

Integrating autoprefix-cli into ANT build

I've been attempting to integrate autoprefix-cli into my ANT build. The code snippet below shows what I've tried so far. <target name="auto"> <apply executable="autoprefixer-cli.bat" verbose="true" force="true" failonerror="true"> ...

javacssbuildantautoprefixer

Utilizing jQuery to target a select element's two specific children

I am trying to target the parent element by matching two specific children elements. Here is my code: $('span:contains("11:00am"), span.name:contains("Tom")').parents("a").css("background-color","rgb(255, 255, 255)"); <script src="https://c ...

javascriptjqueryhtmljquery-selectors

adjustable text size in web view interface

When loading the following html string in a uiwebview, I am trying to set the font-size as a variable value: NSString * htmlString = [NSString stringWithFormat:@"\ <html>\ <s ...

htmlcssuiwebviewxcode4.3

utilize makeStyles to modify button text color

Initially, my button was styled like this: style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', height: 48, padding: '0 30px', }}> It worke ...

javascriptcssreactjstypescriptmaterial-ui

I am attempting to arrange 9 images in a grid format of 3 rows by 3 columns to create a seamless

I am currently working on setting up a 3x3 grid on my website with 9 images and text underneath. The first 6 images are displaying as I intended, but when I add the last 3 images, the layout gets messed up. The first image jumps under the 3rd image on the ...

htmlcssimage

Is it possible for a div to contain more than one class in Twitter Bootstrap?

Is it possible for a div element to have multiple classes assigned to it? I am currently working with Twitter Bootstrap and I would like to utilize two predefined classes. Specifically, I want to apply the active class to a dropdown-toggle within a navig ...

htmlcsstwitter-bootstrap

Unable to connect the CSS file from the JSP during a Cross Domain request in Internet Explorer 9

I have created a GWTP web application and am making AJAX calls to a JSP page on a different domain (Cross domain) from the GWT client side. Most of the time, the CSS files are linking correctly and working fine. However, occasionally they do not link prop ...

htmlcssjspgwt

When a page is being redirected using requestdispatcher in a filter, the CSS contents do not seem to be applying correctly

Upon evaluation of the condition, if it fails, I am utilizing a request dispatcher to redirect to another page. The redirection is successful, however, the CSS is not being applied to the new page. What could be causing this issue? public class RolePrivil ...

htmlcssjsfrichfacesservlet-filters

What could be causing Gulp Autoprefixer to generate unaltered CSS files?

I am currently learning how to utilize Flexbox, and I have encountered an issue with prefixing while using Gulp. The error message that pops up when attempting to use Gulp autoprefixer is as follows: [19:21:22] Starting 'styles'... [19:21:22] Th ...

cssflexboxgulpautoprefixer

Struggling to eliminate margins in a React web application

Can anyone assist me with removing the large white margins on my react project? Here are some solutions I have attempted. * { margin: 0; padding: 0; } /-/-/-/ body { max-width: 2040px; margin: 0 auto; padding: 0 5%; clear: both; } I've exp ...

cssreactjsreact-redux

Ensure that the floated element stretches to 100% height in order to completely fill the page

I'm working on achieving a height of 100% for the left sidebar so that it fills the page regardless of the size of the "main" div. Currently, it stops at the normal page height and doesn't expand further. Is there any way to make this work as i ...

javascriptjqueryhtmlcssheight

My desire is for every circle to shift consecutively at various intervals using Javascript

I'm looking to draw circles in a sequential manner. I am trying to create an aimbooster game similar to . Instead of drawing all the circles at once, I want each circle to appear after a few seconds. The circles I've created currently do not g ...

javascripthtmlcss

The CSS styles can vary depending on the web browser being used

Require assistance with my CSS. I designed an HTML/CSS widget on Blogger using my own expertise, but now facing some issues. The trouble arises with the image on the front left in the code. While it displays correctly on Google Chrome, aligned with the te ...

htmlcssbrowser

Adjusting diagram size based on screen width using Bootstrap and jQuery

I recently created a diagram that adjusts its size according to the screen width. However, when I implemented this code on my page, I encountered an issue where the final circle or glyph would drop to the next line instead of staying on the same line as in ...

javascriptjqueryhtmlcsstwitter-bootstrap

Mobile device scrolling glitch

I'm currently working on my website, which can be found at . After testing it on mobile devices, I came across an issue that I just can't seem to fix. For instance, when viewing the site on a device with 768px width, you can scroll to the righ ...

javascripthtmlcsstwitter-bootstrap-4

Having an absolute element can lead to overflow causing a scroll

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .wrap { ...

htmlcsscss-positionoverflow

Require checkboxes in AngularJS forms

Currently, I have a form that requires users to provide answers by selecting checkboxes. There are multiple checkboxes available, and AngularJS is being utilized for validation purposes. One essential validation rule is to ensure that all required fields a ...

javascripthtmlangularjscheckbox