The media query is causing the responsive menu to malfunction

My website has a responsive menu, and I am attempting to make other parts of the site responsive using media queries.

I implemented two media queries but now the responsive menu is no longer functioning, and I cannot figure out why.

@media (min-width: 768px) and (max-width: 980px)

@media (max-width: 767px)

Below is the code for the menu:

CSS

.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden; 
    background-color: #f6f6f6;
    border: 1px solid #d1d1d1;
}
... // CSS code continues

<p>HTML</p>

<pre><code><div class="topnav" id="myTopnav">
    <a <?php echo ($page == "information") ? "class='active'" : ""; ?> href="/nutickets2/index.php">INFORMATION</a>
    ... // HTML code continues
</div>

JS

    <script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
    </script>

I added the following code to make the site responsive:

@media (min-width: 768px) and (max-width: 980px) {
    .text-head-div div {
        display: block;
    }
    .text-head-div span {
        display: block;
    }
}

@media (max-width: 767px) {
    .text-head-div div {
        display: block;
    }
    .text-head-div span {
        display: block;
    }
}

After adding this code, the responsive menu stopped working. Removing it restores functionality.

htmlcssmenuresponsive-designresponse

Answer №1

Can you describe the appearance of the text-head-div element? Are there any fixed width elements within it or its children?

Sample HTML snippet with embedded code for easier testing:

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
      .topnav {
         list-style-type: none;
         margin: 0;
         padding: 0;
         overflow: hidden; /*overflow help you to create a new row below because you used float left*/
         background-color: #f6f6f6;
         border: 1px solid #d1d1d1;
      }

      .topnav a {

         float: left;
         border-left: 1px solid #d1d1d1;
         display: block; /*"li a" is an inline element by default so we have to convert it in block element for modify the layout*/
         color: #0099cc;
         text-align: center;
         padding: 14px 22px;
         text-decoration: none;
      }


      .topnav .active {
         background-color: #f29323;
         color: #ffffff;
      }

      .topnav a:hover {
         text-decoration: none;
      }


      .topnav a:hover:not(.active) {
         background-color: #f29323;
         color: #fff;
         text-decoration: none;
      }

      .topnav .icon {
       display: none;
      }

      @media screen and (max-width: 600px) {
       .topnav a {
           display: none;
       }
       .topnav a.icon {
         float: right;
         display: block;
       }
      }


      @media screen and (max-width: 600px) {
       .topnav.responsive {
           position: relative;
       }
       .topnav.responsive .icon {
         position: absolute;
         right: 0;
         top: 0;
       }
       .topnav.responsive a {
         float: none;
         display: block;
         text-align: left;
       }

      }

      @media screen and (max-width: 600px) {
       .topnav {
         padding: 0 0;
       }
      }

      @media (min-width: 768px) and (max-width: 980px) {

      .text-head-div div {
         display: block;
      }

      .text-head-div span {
         display: block;
      }
      }

      @media (max-width: 767px) {

      .text-head-div div {
         display: block;
      }

      .text-head-div span {
         display: block;
      }
      }
</style>
<title></title>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="/nutickets2/index.php">INFORMATION</a> 
<a class="active" href="/nutickets2/report.php">Tickets</a> 
<a href="">Info</a> 
<a class="icon" href="javascript:void(0);" onclick="myFunction()" style="font-size:15px;">&#9776;</a>
</div>
<script>
      function myFunction() {
         var x = document.getElementById("myTopnav");
         if (x.className === "topnav") {
             x.className += " responsive";
         } else {
             x.className = "topnav";
         }
      }
</script>
</body>
</html>

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

How to extract precise text from HTML with JavaScript

In my exercise list written in Latex inside strings, I created a php script to generate exercises using: <button type = "button" onclick = "aggiornaInfo()">Save</button> <?php $exercises = array( ...

javascriptphphtml

What could be causing my jQuery to malfunction after I include the .sqrt() function?

Seeking assistance in creating a grid of divs, I am working on finding the square root of the user's input to determine the height and width required to form a square. The code below is what I currently have: $('#size').click(function(){ $ ...

javascriptjqueryhtmlcss

Collaborate on sharing CSS and TypeScript code between multiple projects to

I am looking for a solution to efficiently share CSS and TS code across multiple Angular projects. Simply copy-pasting the code is not an ideal option. Is there a better way to achieve this? ...

cssangulartypescriptshare

What is the best way to showcase a table below a form containing multiple inputs using JavaScript?

Context: The form I have contains various input fields. Upon pressing the [verify] button, only the "first name" is displayed. My goal is to display all input fields, whether empty or filled, in a table format similar to that of the form. Exploration: ...

javascripthtmlhtml-table

What is the best way to retrieve data from the previous webpage and navigate it to the appropriate page using HTML?

I have a pair of HTML files known as list.html and detail.html. From https://jsonplaceholder.typicode.com/posts, I am retrieving title and body data to exhibit on a posts.html page in the following format: posts.html output Displayed below is my posts.ht ...

javascripthtmlcssjsonquery-string

Exploring Next.js: A beginner's attempt at displaying basic JSON data

I'm having trouble updating and displaying the content of my JSON data in my React app. Despite trying various solutions, including adjusting the return value of functions and seeking help on forums, I still cannot get rid of the issue where an empty ...

htmljsonnext.js

Toggle the submenu with a fade effect when jQuery is clicked

Currently, I am facing an issue with creating links that are supposed to open their respective submenus on click. However, the script I have written is opening all submenus instead of the specific ones assigned to each link. Sample HTML Code: <nav> ...

jqueryhtml

Enhance the look of the dropdown menu

Seeking advice on enhancing the appearance of a dropdown menu in an ASP.NET core app using Bootstrap CSS. Suggestions for improving spacing and text aesthetics would be appreciated. Thank you, Peter https://i.sstatic.net/HA5dZ.png Below is the code snipp ...

cssrazor

Looking for a solution to save data without internet access through a web application

My goal is to develop a web application using HTML5, CSS3, and potentially JQuery Mobile. The purpose of this app will be to gather customer data through a form, with the added requirement of being able to operate offline. In the past, I have built offlin ...

htmlcssmanifest

Logging DOM elements with Electron's webview preload feature

Within my Electron program, I am utilizing a webview in my index.html file. The webview is equipped with a preloader, and my goal is to manipulate the DOM of the webview specifically, not just the index.html file. In my preloader code snippet below, the c ...

javascripthtmlwebviewelectron

having trouble getting jQuery .submit() function to trigger

I am having trouble getting jQuery's .submit() function to work on my form. I have successfully tested an alert when placed within $(document).ready(), but I cannot seem to get it to trigger on form submission. Here is the script I am using in the BO ...

jqueryhtmlbootstrap-4

Tips for Automatically Keeping Bootstrap Dropdown Open When Selecting an Option

My bootstrap dropdown features a select box with specific options that I want to keep visible. However, when I click on it, the drop-down closes unexpectedly. How can I prevent the drop-down from closing when clicking on the select box? Check out this boo ...

csstwitter-bootstrapbootstrap-4

Trouble with JavaScript event listener/button functionality

Seeking a simple fix here. While I have experience in Java, I am slowly but surely delving into Javascript. Currently, I am working on creating a fun website. The specific task at hand involves utilizing the parse api. My approach (as there seemed to be ...

javascriptjqueryhtmlruby-on-rails

Setting the height of an element based on the height of its background image

Hey there! I'm currently working with this component in my app, and right now, the height of the ButtonBase element is fixed. I fetch an image from the backend and use it as a backgroundImage for the ImageImagine component. I want to dynamically adjus ...

cssreactjsmaterial-uistyled-components

Is there a way to enlarge an iFrame to fill the entire screen with just a button click, without using JavaScript

I am currently attempting to achieve full screen mode for an iFrame upon clicking a button, similar to the functionality on this site. On that website, there is a bar that expands to full screen along with the embedded game, which is what I am aiming for. ...

javascripthtmliframefullscreen

Solving the issue of overflowing in the animation on scroll library

I've recently started using a fantastic library called animation on scroll (aos) for my web development projects. This library offers stunning and visually appealing animations. However, I encountered an issue where it causes overflow problems in my H ...

javascripthtmlcssanimationcss-animations

disabling responsiveness in Bootstrap 2

I am facing an issue with Bootstrap version 2 where I am unable to fix the grid layout. Even after wrapping all my HTML elements in a container, the layout still behaves unpredictably on different screen sizes. Here is a snippet of my code: <header> ...

htmlcsstwitter-bootstrap

Obtaining data from HTML using VBA is not possible with .getElementsByTag() or .getElementByID()

Currently, my project involves extracting data from HTML source code. My focus is on analyzing crash cases from the following website: To achieve this, I aim to collect all relevant data from the HTML by searching for .innertext of specific tags/IDs. Thi ...

htmlvbaweb-scrapinggetelementbyidgetelementsbytagname

How can you use JavaScript to retrieve the position of an element on a webpage?

As mentioned in the title, I am looking for a way to retrieve the x and y positions of an element relative to its location on the webpage and based on its positioning schemes such as absolute or relative. ...

javascriptcssxhtmlpositioning

Is there a way to position my image and text side by side?

My current objective revolves around implementing a specific design, as illustrated in this image. The issue I'm encountering in my code pertains to the utilization of the bootstrap grid system for ease of layout. However, when I incorporate both tex ...

htmlcssbootstrap-4flexboxbootstrap-5