Is it possible to hide a div using Media Queries until the screen size becomes small enough?

Whenever the screen size shrinks, my navbar sections start getting closer together until they eventually disappear. I've implemented a button for a dropdown menu to replace the navbar links, but I can't seem to make it visible only on screens with a maximum width of 600px or less. Either it is displayed alongside the navbar links before they vanish, or it's not visible at all. Can someone help me out?

Below is the media query for this section:

@media (max-width:600px) {
    #main-pic{margin: 0 0 0 -220px;}
    #welcomesign{margin: 0 0 0 -40px;}
    #navprojects{display:none;}
    #navcontact{display:none}
    #navartwork{display:none}
    #navresume{display:none;}
    #navhome{display:none;}
    #3bd{visibility:visible}
}

And here is the HTML code:

<ul>    
    <a id="nav1" class="eight" href=index.html><img id="sgmainlogo" src="sgproject4.png" alt=SGproject style=55px;width:55px;position:absolute;left:10px;top:4px;></a>
    <li id="navhome"><a id="nav" class="ten" href=home.html>Home</a></li>
    <li id="navresume"><a id="nav" class="ten" href=resume.html>Resume</a></li>
    <li id="navprojects"><a id="nav" class="ten" href=projects.html>Projects</a></li>
    <li id="navartwork"><a id="nav" class="ten" href=artwork.html>Artwork</a></li>
    <li id="navcontact"><a id="nav" class="ten" href=contact.html>Contact</a></li>

    <div id="3bd" class="dropdown" style="visibility:hidden;">
        <button onclick="myFunction()" class="dropbtn fa fa-bars"></button>
        <div id="myDropdown" class="dropdown-content">
            <a class="six" href="home.html">Home</a>
            <a class="six" href="resume.html">Resume</a>
            <a class="six" href="projects.html">Projects</a>
            <a class="six" href="artwork.html">Artwork</a>
            <a class="six" href="contact.html">Contact</a>
        </div>
    </div>
</ul>
javascriptjqueryhtmlcssmedia-queries

Answer №1

In previous comments, it was mentioned that the only valid child of ul should be an li element. Therefore, your a and div elements are considered invalid HTML in this context.

It is important to surround inline attributes with quotation marks like ". Moreover, IDs must be unique within the document; repeating #nav multiple times can cause issues.

The reason your media query may not be functioning correctly could be due to the ID 3bd starting with a digit—unless you are using a HTML5 doctype and have inline styles overriding your CSS rules.

To address these concerns: I have resolved the HTML errors and moved the inline style to external CSS outside the media query.

#id_3bd {
  visibility: hidden;
}

@media (max-width:600px) {
  #main-pic {
    margin: 0 0 0 -220px;
  }
  #welcomesign {
    margin: 0 0 0 -40px;
  }
  #navprojects {
    display: none;
  }
  #navcontact {
    display: none;
  }
  #navartwork {
    display: none;
  }
  #navresume {
    display: none;
  }
  #navhome {
    display: none;
  }
  #id_3bd {
    visibility: visible;
  }
}
<ul>
  <li>
    <a id="nav1" class="eight" href="index.html"><img id="sgmainlogo" src="sgproject4.png" alt="SGproject" style="height:55px;width:55px;position:absolute;left:10px;top:4px;"></a>
  </li>
  <li id="navhome"><a id="nav2" class="ten" href="home.html">Home</a></li>
  <li id="navresume"><a id="nav3" class="ten" href="resume.html">Resume</a></li>
  <li id="navprojects"><a id="nav4" class="ten" href="projects.html">Projects</a></li>
  <li id="navartwork"><a id="nav5" class="ten" href="artwork.html">Artwork</a></li>
  <li id="navcontact"><a id="nav6" class="ten" href="contact.html">Contact</a></li>
  <li>
    <div id="id_3bd" class="dropdown">
      <button onclick="myFunction()" class="dropbtn fa fa-bars"></button>
      <div id="myDropdown" class="dropdown-content">
        <a class="six" href="home.html">Home</a>
        <a class="six" href="resume.html">Resume</a>
        <a class="six" href="projects.html">Projects</a>
        <a class="six" href="artwork.html">Artwork</a>
        <a class="six" href="contact.html">Contact</a>
      </div>
    </div>
  </li>

</ul>

Answer №2

It is recommended not to use inline CSS that includes media queries; instead, place the media query after your default CSS.

.dropdown {
  visibility: hidden;
}

@media (max-width:600px) {
  #main-pic {
    margin: 0 0 0 -220px;
  }
  #welcomesign {
    margin: 0 0 0 -40px;
  }
  #navprojects {
    display: none;
  }
  #navcontact {
    display: none
  }
  #navartwork {
    display: none
  }
  #navresume {
    display: none;
  }
  #navhome {
    display: none;
  }
  .dropdown {
    visibility: visible
  }
}
<ul>
  <a id="nav1" class="eight" href=index.html><img id="sgmainlogo" src="sgproject4.png" alt=SGproject style=55px;width:55px;position:absolute;left:10px;top:4px;></a>
  <li id="navhome"><a id="nav" class="ten" href=home.html>Home</a></li>
  <li id="navresume"><a id="nav" class="ten" href=resume.html>Resume</a></li>
  <li id="navprojects"><a id="nav" class="ten" href=projects.html>Projects</a></li>
  <li id="navartwork"><a id="nav" class="ten" href=artwork.html>Artwork</a></li>
  <li id="navcontact"><a id="nav" class="ten" href=contact.html>Contact</a></li>

  <div id="3bd" class="dropdown">
    <button onclick="myFunction()" class="dropbtn fa fa-bars"></button>
    <div id="myDropdown" class="dropdown-content">
      <a class="six" href="home.html">Home</a>
      <a class="six" href="resume.html">Resume</a>
      <a class="six" href="projects.html">Projects</a>
      <a class="six" href="artwork.html">Artwork</a>
      <a class="six" href="contact.html">Contact</a>
    </div>
  </div>
</ul>

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

The agent.add() function is malfunctioning, while console.log() is functioning properly

I'm currently working on integrating a bot using Telegram, Dialogflow, and Firebase. One particular function that I'm struggling with is as follows: function findDoc(agent){ const userId = request.body.originalDetectIntentRequest.payload.dat ...

javascriptfirebasegoogle-cloud-firestoredialogflow-estelegram-bot

Converting between GPS degrees and decimal values using jquery, javascript, and PHP: A comprehensive guide

Is there a way to convert GPS degree to decimal values or vice versa? I am working on developing a feature where users can input an address and retrieve the GPS values in both degree and/or decimal format. However, my main challenge is understanding how t ...

javascriptjquerygps

Can express middleware be tailored for each individual handler within the same route path?

I am seeking to create distinct routes under an /api path with varying middleware handlers, each allowing for different authentication methods. My initial approach was to nest these API routes under separate instances of the Router object using Express: c ...

javascriptnode.jsexpress

Move on to a different screen in a React Component once the data has been fetched

Currently, I am delving into the world of React and TypeScript and attempting to utilize "react-router-dom" in order to create a login component that will interact with my backend server. Essentially, my goal is to develop a "Login" class that, upon form ...

javascriptreactjstypescriptreact-router

Having trouble with transferring JSON data as a string from POSTMAN to a node server

My JSON data structure is as follows: const json = { "name": "Peter", "age": 21 } After calling JSON.stringify(json), the result is: '{"name":"Peter","age":21}' I am currently us ...

javascriptjsonpostpostman

The compatibility between Babel 7 and the preset-es2015 is not very reliable

After reading this useful tutorial on implementing server-side rendering with create-react-app, I attempted to execute the following code snippet: require('ignore-styles'); require('babel-register')({ ignore: [/(node_modules)/], ...

javascriptreactjswebpackbabeljscreate-react-app

Each time the toggle is switched, an additional AJAX request is sent to the PHP document

I've been working on a function that sends data to a PHP file, which then processes the data. The PHP part works fine, but I'm having issues with the jQuery side of things. Each time I click on a ".work" element and trigger the toggle function, a ...

jqueryajax

The FlatList glides effortlessly in any direction

My FlatList allows me to drag and move it in all directions (up/down/right/left) even though it appears vertically due to styling. The scroll bar still shows horizontally, which I want to disable. How can I achieve this? This is the code snippet for using ...

javascriptreactjstypescriptreact-nativereact-native-flatlist

Interested in gaining knowledge on how to define basic properties on the model within Angular.JS?

As I dive into the demos on the angular.js website, one aspect that caught my attention is the lack of explicit model/properties definition compared to other frameworks like durandal. For instance, how can we access the property "yourName" in a particular ...

javascriptangularjsdurandal

Tips for aligning hyperlinks in the navigation bar using CSS3 and HTML5

Struggling to center the links in the navigation bar has been a challenge. I really want those buttons smack dab in the middle of the header bar, but despite trying everything, they stubbornly remain on the left-hand side. .header { overflow: ...

htmlcssnavcentering

Responsive left and right image styling in CSS and HTML

I have designed a landing page with fixed left and right images and content in the middle. It looks fine on desktop view, but on mobile view, the images are overlapping the content. How can I resolve this issue? <div class=" ...

javascriptphphtmlcsslaravel

Is it possible to store Ajax URL parameters as a variable?

Is it possible to assign a variable to the url in an ajax request? function customAjaxRequest() { $.ajax({ url: customUrl, type: "POST", dataType: "html" }); Appreciate your help! ...

jqueryajaxurlparameters

Navigating through different pages in PHP

How can I set up my php page to handle the following situations? When someone clicks on "my account", they should be directed to the login page if they are not currently logged in. If a user is already logged in and clicks on "my account," they should ...

phphtml

Adjust the top position of a div element at regular intervals

How can I make the top position of an absolutely positioned div with children change every x seconds using jQuery? I tried using setInterval but it only changes once. Here is my code: .com_prices { width: 100%; height: 100%; overflow: hidden; back ...

javascriptjqueryhtmlcss

What is the method for retrieving a JSON type object property that is stored inside a data object in a Vue template?

I am facing an issue with retrieving data from a Vue.js app object. data() { return { group1: { id: 'qd4TTgajyDexFAZ5RKFP', owners: { john: {age: 32, gender: 'man'}, mary: {age: 34, gender: 'wom ...

javascriptvue.jsobjecttemplates

"Cross-origin resource sharing problem while working with NodeJs, Express, and React on

Currently, I am working on a small project where I am using NodeJs and Express for the backend and React for the client side. In order to tackle CORS policy issues, I have implemented the "cors" npm package on the server side, but unfortunately, it doesn& ...

javascriptnode.jsreactjsexpresscors

The background color spills outside the column when using 100% width

Bootstrap 5 is being used, and two columns have been created on the page. The current output looks like this: https://i.stack.imgur.com/P6oZs.png Now, there's a need to display an orange color from end to end of the left column. To achieve this, h- ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for fading out two elements after completing a drag and drop action

Visit this Codepen for more examples - Codepen I have been developing a drag and drop feature in my application. Once the item is dropped, it transitions from red to green and fades out smoothly. The droppable element behind the draggable should also fad ...

javascriptjqueryhtmlcssjquery-ui

Issue encountered during Heroku deployment: Failed to build React app. When attempting to push changes to Heroku, an unexpected end of input error was received instead of the expected result. This error occurred on an unidentified file at

Encountering a parsing error while attempting to deploy a React app on Heroku using git push heroku master. The app built successfully yesterday, but since then some media queries were added by another contributor to various .scss files. The primary error ...

javascriptreactjsgitherokunpm

Can a webpage have a fixed focus point that automatically adjusts the scroll bar when the content changes?

Looking for some assistance with a message board issue I am facing. As new messages are added, the board constantly expands and pushes older ones down. Is there a way to lock the scroll to a specific message? For example, keeping the same view of message ...

jquery