Unable to hide the mobile menu button

https://i.sstatic.net/5rdYY.pngI am currently working on a fun website project . I am facing an issue with the mobile menu button not disappearing using display:none in Safari on my iPhone when in landscape mode, even though it works fine in Chrome. My goal is to make the #menu-button visible when the device screen size is under 500px and hide it when it goes above 500px. The menu button is inserted via jQuery with the id of #menu-button. Checking the css_tablet.css source in dev tools will show you that I have set #menu-button to display:none. Any advice on how to solve this would be greatly appreciated.

$("#menu").addClass("js").before('<div id="menu-button"><img src="third_logo.png" alt="menu"></div>');
$("#menu-button").click(function(){
    $("#menu").toggle();
});
$("li").click(function(){
    $("ul").hide();
});
javascriptjqueryhtmlcss

Answer №1

Here is the CSS code to address the issue - 

@media screen and (min-width: 500px) {

    #menu-button {
        display: none;
    }
    #menu.js{
        display: block !important;  // Ensure '!important' is used as inline style might be added by JavaScript on the menu (display block/none)
    }
}

The provided CSS will fix the problem with hiding the button and also resolve the issues discussed in previous comments.

To gain a better understanding of Media Queries for various devices, check out this article - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer №2

All the CSS rules in your "css_tablet.css" file are enclosed within a media query that targets screens with a minimum width of 500px.

@media screen and (min-width: 500px) {
  #menu-button {
    display: none;
  }
  ... more CSS ...
}

Considering that the portrait view widths for an iPhone 5, iPhone 6, and iPhone 6+ are 320px, 375px, and 414px respectively, these devices do not meet the criteria set by the media query in your stylesheet, meaning they do not apply the styles defined in "css_tablet.css".

In essence, the issue is not specific to phones or tablets.

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

Interactive Gridview feature enables users to rearrange data elements easily by dragging and dropping them into desired

Currently, I am working on a sample project involving the drag and drop functionality of a grid view that allows users to reorder data. My main challenge is figuring out how to retrieve the data from the first column in the order that the user has changed ...

c#htmlasp.netgridview

What could be causing my JavaScript loop to only display the final value?

Story Behind the Game In my latest project, I am delving into the world of creating a captivating 2D side-scrolling game using HTML and JavaScript. To ensure smooth gameplay, I have opted to incorporate ES6 for efficient management of all game objects. C ...

javascriptarraysloops

Enhancing the appearance of each letter within a word

I am currently working on styling the word "Siteripe". Each letter should have a different color, just like it is shown on this website. I have successfully styled only the first letter using the following CSS code: #namer:first-letter { color:#09C; f ...

csscss-selectors

Choosing an element beneath a table row using a different element as a reference

I'm attempting to identify the checkboxes associated with the link containing delete.jpg. Here's what I've tried so far: <table> <tr class="odd"> <td><input id="cbox1" type="checkbox"></input></td> ...

javascript

"Image Reactor: Unleashing the Power

I'm struggling to understand why my relative path image loading isn't functioning correctly. The assets are located within the src folder in my working directory, but for some reason, they're not displaying as expected. When I directly impo ...

javascriptreactjsimage

Resource loading failed due to the XMLHttpRequest restriction

I am attempting to create a basic php backend for managing a contact form on another server. Despite adding the correct headers, I keep encountering the same error message: XMLHttpRequest cannot load https://php-contact-form-lual.herokuapp.com/. No ' ...

phpjqueryajaxheroku

Utilizing Threejs to implement dynamic text labels

Recently, after reading a discussion on stackoverflow, I decided to incorporate labels into my canvas. To achieve this, I created a second scene and camera to overlay the labels on top of the first scene. this.sceneOrtho = new THREE.Scene();//for labels t ...

javascriptthree.js

Unable to integrate the bootstrap Modal within an Angular 2 application

I am working on an Angular 2 app and I am trying to implement Bootstrap Modal windows. I have added the jquery and bootstrap.js files at the end of the body tag. Although the app loads without any errors, when I try to use the modal function in the console ...

jqueryangulartwitter-bootstrap-3bootstrap-modal

What is the process for creating a new element and utilizing its reference to add child elements in React?

I've been struggling to create an HTML element in a parent component in React, and then access that component's div from a child component in order to add new elements to it. Despite multiple attempts, I can't seem to resolve the issue of p ...

javascriptreactjstypescript

Issue with adding HTML content to bootstrap modal not functioning as expected

Having trouble displaying an image in a bootstrap modal by using data- attribute within a php foreach loop. The image doesn't seem to appear in the target div. Here's my code snippet: <script> $(document).ready(function(){ $( ".subscri ...

javascriptjquerytwitter-bootstrapappendbootstrap-modal

Having issues with Firefox rendering JavaScript and CSS correctly

I'm trying to figure out if it's the row class from Bootstrap that's causing issues, or if there's a problem with my JS/CSS not loading properly in Firefox. It seems to be working fine in Chrome and Safari. Any ideas on what could be go ...

javascripthtmlcsstwitter-bootstrap

How do I use jQuery to target a specific list item based on its data attribute and the ID of the list it belongs to?

Can anyone provide me with the correct jQuery syntax for selecting a list item based on a data attribute within a specific list? Below is an example list: <ul id="menu"> <li data-code="soup">Soup</li> <li data-code="salad">Salad< ...

jqueryjquery-selectors

Revamp HTML <font size=1-7> with the use of CSS or JavaScript

I've been developing a prototype application that incorporates a plugin utilizing the deprecated HTML feature. Can I set custom pixel sizes for each font size ranging from 1 to 7? Currently, I'm contemplating using CSS zoom/scale properties, bu ...

javascripthtmlcssfont-size

Maintaining the order of elements in Angular's insertion process

I am currently facing an issue with my HTML fragment that iterates over a key and value collection. Everything works perfectly when I insert values into an object and iterate through it using the HTML fragment. However, in order to maintain a specific key ...

javascripthtmlangularjs

ERROR: No compatible version of jQuery Foundation could be located

Encountering issues while installing Foundation due to conflicts with Jquery. λ bower install foundation bower foundation#x cached https://github.com/zurb/bower-foundation.git#5.5.1 bower foundation#x validate 5.5.1 against https: ...

javascriptjqueryjsonzurb-foundationbower

Stop ajax request when select2 is clicked

Is there a way to change the ajax call behavior in select2 drop down items so that it only retrieves data when I start typing in the search box, and not on click of the element? Your guidance on this issue would be highly appreciated. $("#ddlItems").sel ...

javascriptjqueryjquery-select2

"Moisten" a JavaScript object instance using a JSON array, similar to the way PHP does

When populating PHP objects with data, I typically use the following method: public function hydrate(array $data){ foreach($data as $key=>$value){ $method = 'set'.ucfirst($key); if(METHOD_EXISTS($this,$method)){ ...

javascriptphparraysjsonobject

Tips for updating span content within an automatically generated table in Django by leveraging AJAX feedback

On my Django website, I have a products page where I can add items to the cart by clicking an "Add to Cart" button. These items are added as order items based on the item's primary key. Now, on the Cart page, I can see the specific products that have ...

htmljquerydjangoajax

Customizing the color of a select dropdown in Bootstrap using CSS styling

I am having difficulty changing the default blue color for Bootstrap select dropdowns. Despite trying :hover and :active selectors on both option and select, I have not been successful in making the desired changes. Could anyone provide insight regarding ...

htmlcsstwitter-bootstrapdatatables

Guide on exporting Excel data using Angular and TypeScript

My project involves managing a table of information that includes fields for FirstName, LastName, PhoneNumber, Age, and Date. I've created a function that allows me to export the data to an Excel file, but I only want to export specific fields like Fi ...

htmlcssangulartypescript