Unable to hide the mobile menu button

I 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

What is the best way to eliminate concealed divs from the view source of a webpage?

On my HTML page, I have some hidden DIVs that can still be viewed in the page source. I want to ensure that these DIVs are not visible to users when they inspect the page source. Is there a way to achieve this using Javascript or another solution? ...

javascriptphphtml

Troubleshooting PHP password change functionality issue

I'm having trouble with my code and need some help identifying the issue. The problem I'm facing is that when I try to set a new password, it doesn't seem to save in my database and I can't log in with the new password. Here's the ...

phphtml

What is the best way to create a video that adjusts to different screen sizes within

I am working on the responsive version of client's website and I stumbled upon this issue - when I make smaller the browser window, the youtube video is not centered - the padding-right: 10px; is ignored - why? How could I fix that? Here is the CSS ...

htmlcssresponsive-design

Showcasing the Characteristics of Products in a Table on Prestashop

Dealing with PrestaShop. I have configured attributes for a product and I want to showcase them in a table format similar to this example: The table should display the Paper Size across the top, with each row representing the quantity of paper. In my ad ...

phphtmlcssprestashopprestashop-1.5

Ways to invoke a function within a React Material-UI component

Currently, I am in the process of setting up a chat system that allows users to add emojis. To achieve this feature, I have devised a function that produces a component containing both text and an image. Here is the function I have implemented: test: fu ...

javascriptreactjsmaterial-ui

Angular Promises - Going from the triumph to the disappointment callback?

It seems like I might be pushing the boundaries of what Promises were intended for, but nonetheless, here is what I am attempting to do: $http.get('/api/endpoint/PlanA.json').then( function success( response ) { if ( response.data.is ...

javascriptangularjsangular-promise

Express is throwing an error indicating that the specified route cannot be found. Is there a way to dynamically

After dynamically adding routes and sending a post request through Postman, I encountered a "not found" error message. In the app, a 404 is logged next to the endpoint, indicating that Express cannot locate it. However, I know that I added the router dynam ...

javascriptnode.jsexpress

Customize Appearance: Overlay Images with Display Properties

I have created a unique slideshow that overlays multiple images using JavaScript to change their opacity and attributes. You can view the slideshow here: Upon inspection (using firebug), I noticed an issue with how the images are displayed. When the displ ...

htmlcss

Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

Trying to create a customized PACS viewer for scrolling through a series of CT head images. However, encountering an issue with scrolling through all 59 images. Currently, able to scroll from the first to the 59th image, but struggling to loop back to the ...

jquerycss

Is there a way to navigate to a newly created document?

Is there a way to automatically redirect a user to the show action of a document or post they have just created using express.js? Take a look at the following code snippet, which outlines how I am creating the document: app.post('/document/create&ap ...

javascriptnode.jsexpress

Is it possible to implement smooth scrolling in HTML without using anchor animation?

Is it feasible to implement a more seamless scrolling experience for a website? I'm referring to the smooth scrolling effect seen in MS Word 2013, but I haven't come across any other instances of this. I've heard that AJAX can make such th ...

javascriptjqueryhtmlcssajax

Listening for events on jQuery forms

Is it feasible to create an event listener for a form that prevents submission if a specific action, such as selecting an element from a list, is not taken, and then triggers an alert message? Appreciate your help! ...

jqueryeventsformssubmitlistener

Error message: The call stack size has surpassed the limit, resulting in a RangeError. This issue is

I currently have a dynamic unordered list within my HTML file. Upon loading the page, certain list items are automatically added. The original format of the list is displayed as follows: <ul class="ui-front"> <li><div>1</div& ...

javascriptjquery

I encountered an issue in reactjs where I received the error message: TypeError: this.state.coords.map is not functioning properly

Here is the code snippet I wrote: import React, { Component } from 'react'; class LocationApp extends Component { constructor(props){ super(props) this.state = { coords:[], error:[], } } ...

javascriptarraysreactjsfunctiondictionary

The issue of flickering during the combination of slideToggle and animate in jQuery

I want to incorporate a hidden div that, when triggered by a button click, will smoothly reveal itself and "push" away part of another div without changing the overall size of the containing div. However, I have encountered an issue where the div below th ...

javascriptjqueryhtmlcss

Is there a way to use JQuery to simulate Coldfusion's navigate functionality while also sending POST data from a

Considering the switch to using JQuery instead of our current Coldfusion ajax functionality. I particularly enjoy how Coldfusion AJAX can easily navigate to any container (window, div, etc) and submit the content of specified form data directly. Is there ...

jqueryajaxcoldfusion

The Angular Google Maps Module fails to initialize

After updating angular-google-maps to version 2.0.1 via bower and adding the required dependencies (bluebird, jquery, loadash), I noticed that my app works fine when I comment out google-maps. This suggests that the issue lies with angular-google-maps. He ...

javascriptangularjsgoogle-mapsangular-google-maps

Utilize new metadata options to incorporate an external style and script file

I'm looking to incorporate external CSS and scripts into my NextJS app (NextJS version 13.4.13). Here's what I need: Style https://company.com/statics/1/package/dist/1/styles/dls.min.css Script https://company.com/statics/1/package/dist/1/ ...

javascriptnext.jsnext.js13

ng-bind-html is having trouble parsing the HTML correctly and binding it

Here is the code for my controller: myApp.controller('actionEditController', ['$scope', '$stateParams', '$sce',function ($scope, $stateParams, $sce) { $scope.table="<p>OOPSY</p>"; $sc ...

javascripthtmlangularjs

Exploring the depths of AngularJS through manual injection

I seem to have misunderstood the tutorial and am struggling to get manual injection working on my project. As I'm preparing to minify and mangle my JS code, I decided to manually inject all my modules and controllers. However, I keep encountering err ...

javascriptangularjs