HTML Not Responding To Media Query

user_13802041 0
Viewed 97

This is my first time using media queries.

I am building a navigational bar for a website, and I would like it to change from a navigational bar to a dropdown list after a certain device width is reached (like in https://www.w3schools.com/howto/howto_js_topnav_responsive.asp). I have incorporated W3's design into my own, however, it seems like I cannot get my navigational bar to change.

Here is my relevant CSS:

... Additional CSS Settings...
.navigation-bar{
    width:100%;
    list-style-type: none;
    margin:0;
    padding:0;
    background-color: #DDDDDD;
    overflow:hidden;
}
.navigation-bar li{
    display:inline;
}
.navigation-bar a{
    text-decoration: none;
    font-size: 120%;
    color: #000000;
    padding-left:1%;
    padding-right:1%;
    padding-top:0.5%;
    padding-bottom:0.5%;
    display:inline-block;
}
.navigation-bar a:hover{
    background-color:#999999;
}
.navigation-bar a.active{
    background-color: #999999;
}
.navigation-bar .icon{
    display:none;
}
... Additional CSS Settings..

@media screen and (max-width: 900px){
    .navigation-bar a:not(:first-child) {display: none;}
    .navigation-bar a.icon{
        float:right;
        display: block;
    }
}
@media screen and (max-width: 900px) {
    .navigation-bar.responsive {position: relative;}
    .navigation-bar.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .navigation-bar.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
}

Here is my relevant HTML:

<html>
  <head>
    <meta charset = "utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>Title</title>
    <link rel=stylesheet type="text/css" href="CS File">
  </head>
  <body>
    <h1><a href="index.html">Website Title</a></h1>
    <ul id="navigation" class="navigation-bar">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 6</a></li>
      <li><a href="#">Item 7</a></li>
      <li><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
    </ul>
    <script type="text/javascript" src="JS File"></script>
    <script type="text/javascript" src="css3-mediaqueries.js"></script>
  </body>
</html>

Here is my relevant JS:

function myFunction() {
    var x = document.getElementById("navigation");
    if (x.className === "navigation-bar") {
      x.className += " responsive";
    } else {
      x.className = "navigation-bar";
    }
  }

With this, my navigational bar is not responding at all. I am wondering if I am missing anything that I need to include in my code, or if I am missing something. I'm thinking that it might have something to do with my navigation being within a list, but I am not sure how that would affect the code, nor how to create a workaround it.

W3's Example Code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

css html jquery javascript
2 Answers

The reason your code isn't working compared to the W3Schools example is because the CSS is targeting different elements compared to yours.

Basically you just had to tweak where it said a to be li (in your CSS).

I also had to remove the class="icon" from the <a> element and add it on the relevant <li> (in the HTML).

See my example below;

function myFunction() {
    var x = document.getElementById("navigation");
    if (x.className === "navigation-bar") {
      x.className += " responsive";
    } else {
      x.className = "navigation-bar";
    }
  }
.navigation-bar{
    width:100%;
    list-style-type: none;
    margin:0;
    padding:0;
    background-color: #DDDDDD;
    overflow:hidden;
}
.navigation-bar li{
    display:inline;
}
.navigation-bar li{
    text-decoration: none;
    font-size: 120%;
    color: #000000;
    padding-left:1%;
    padding-right:1%;
    padding-top:0.5%;
    padding-bottom:0.5%;
    display:inline-block;
}
.navigation-bar li:hover{
    background-color:#999999;
}
.navigation-bar li.active{
    background-color: #999999;
}
.navigation-bar .icon{
    display:none;
}

@media screen and (max-width: 900px){
    .navigation-bar li:not(:first-child) {display: none;}
    .navigation-bar li.icon{
        float:right;
        display: block;
    }
}
@media screen and (max-width: 900px) {
    .navigation-bar.responsive {position: relative;}
    .navigation-bar.responsive li.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .navigation-bar.responsive li {
      float: none;
      display: block;
      text-align: left;
    }
}
<html>
  <head>
    <meta charset = "utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>Title</title>
    <link rel=stylesheet type="text/css" href="CS File">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <h1><a href="index.html">Website Title</a></h1>
    <ul id="navigation" class="navigation-bar">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 6</a></li>
      <li><a href="#">Item 7</a></li>
      <li class="icon"><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
    </ul>
    <script type="text/javascript" src="JS File"></script>
    <script type="text/javascript" src="css3-mediaqueries.js"></script>
  </body>
</html>

user_138885900

You have done everything, just somethings was there which you were doing wrong They are:-

  1. you have used <ul>, <li> without any reason you could have used just <div> and <a>.
  2. And That hamburger icon was not showing because you had not pasted their CSS link [<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">]. they were using their custom link to show that hamburger icon.
  3. I don't know how and why you didn't write the CSS file name correctly you wrote CS File not CS File.css due to which the CSS content you wrote was not working

Well, These are the changes I have done in your HTML file:-

    <html>
  <head>
    <meta charset = "utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>Title</title>
    <link rel=stylesheet type="text/css" href="CS File.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  </head>
  <body>
    <h1><a href="index.html">Website Title</a></h1>
    <div id="navigation" class="navigation-bar">
      <a href="#">Item 1</a>
      <a href="#">Item 2</a>
      <a href="#">Item 3</a>
      <a href="#">Item 4</a>
      <a href="#">Item 5</a>
      <a href="#">Item 6</a>
      <a href="#">Item 7</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
    </div>
  </body>
</html>

And This is Your CSS code which I have edited a little bit

/* ... Additional CSS Settings... */
.navigation-bar{
    width:100%;
    list-style-type: none;
    margin:0;
    padding:0;
    background-color: #DDDDDD;
    overflow:hidden;
}

.navigation-bar a{
    display:inline;
    text-decoration: none;
    font-size: 120%;
    color: #000000;
    padding-left:1%;
    padding-right:1%;
    padding-top:0.5%;
    padding-bottom:0.5%;
    display:inline-block;
}
.navigation-bar a:hover{
    background-color:#999999;
}
.navigation-bar a.active{
    background-color: #999999;
}
.navigation-bar .icon{
    display:none;
}
/* ... Additional CSS Settings.. */

@media screen and (max-width: 900px){
    .navigation-bar a:not(:first-child) {display: none;}
    .navigation-bar a.icon{
        float:right;
        display: block;
    }
}
@media screen and (max-width: 900px) {
    .navigation-bar.responsive {position: relative;}
    .navigation-bar.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .navigation-bar.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
}

Now Comes to Java Script in Java Script everything was correct so no need to edit that it is same a before:-

function myFunction() {
    var x = document.getElementById("navigation");
    if (x.className === "navigation-bar") {
      x.className += " responsive";
    } else {
      x.className = "navigation-bar";
    }
  }

yeah! one thing that you can do is add transition it could look really awesome with the transition.

Hope That Helped.!!!

user_138033180
Related