Jake Xia Jake Xia - 3 months ago 18
HTML Question

media queries and viewport not working

I'm trying to make a responsive navigation bar so that when the device used to access the website is too small to fit the entire navigation bar, it collapses into a dropdown. Strangely, the media queries I'm using don't seem to be doing anything to the website. In the head of my HTML file, I have this :

<meta name="viewport" content="width=device-width, initial-scale=0.8" >


Here is the css:

@media screen and (max-width: 800px) {
ul.topnav li:not(: first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}

ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}




var main = function () {

function openNav() {
var x = document.getElementById("topnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
}

$(document).ready(main);

.jumbotron p {
font-weight: 400;
font-family: 'roboto', sans-serif;
}
.topnav {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
background-color: transparent;
color: black;
transition: all 0.25s ease;
position: fixed;
top: 0;
width: 100%;
padding: 20px;
}
ul.topnav {
list-style-type: none;
margin: 0;
overflow: hidden;
display: flex;
align-items: center;
}
ul.topnav li {
float: left;
}
ul.topnav li.icon {
display: none;
}
.topnav a {
margin-left: 20px;
text-decoration: none;
color: black;
}
.topnav a:hover {
margin-left: 20px;
text-decoration: none;
color: #FACD00;
}

@media screen and (max-width: 800px) {
ul.topnav li:(not: first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}

ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE html>

<body>

<!--navbar-->
<ul class="topnav">
<li><a href="#">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Volunteer</a></li>
<li><a href="#">Contact</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="openNav()">&#9776;</a>
</ul>


</body>




Answer

Just put the media query on the bottom of the css file. The CSS rules are applied by specificity and when having the same specificity (this is your case) by the order the selectors appear.

Also corrected the syntax mistake that Artem Gorlachev pointed out.

.jumbotron p {
    font-weight: 400;
    font-family: 'roboto', sans-serif;
}
.topnav {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    background-color: transparent;
    color: black;
    transition: all 0.25s ease;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px;
}
ul.topnav {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}
ul.topnav li {
    float: left;
}
ul.topnav li.icon {
    display: none;
}
.topnav a {
    margin-left: 20px;
    text-decoration: none;
    color: black;
}
.topnav a:hover {
    margin-left: 20px;
    text-decoration: none;
    color: #FACD00;
}
@media screen and (max-width: 800px) {
    ul.topnav li:not(:first-child) {
        display: none;
    }
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }

    ul.topnav.responsive {
        position: relative;
    }
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.topnav.responsive li {
        float: none;
        display: inline;
    }
    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }
}