I am attempting to remake (or perhaps alter) my version of W3 School's Startup Template. I have a navbar with some right aligned links that should be viewable on desktop and absent on mobile, replaced by a hamburger menu. Neither seems to be doing as designed. The mobile menu button which shouldn't be visible on widescreen, is (worse yet, it disappears when the viewport is made smaller)... and the desktop menu items that shouldn't disappear until the window is reduced to 600 px appear to leave somewhere around the 50% width of my 1920 px width display.
Here is my code:
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
line-height: 1.7;
}
h1 {font-family: "Roboto", sans-serif}
h2 {font-family: "Roboto Condensed", sans-serif}
body,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.container {
position: absolute;
top: 0;
width: 100%;
z-index: 9999;
padding: 0;
}
.navbar {
width: 100%;
height: 70px;
z-index: 9999;
margin: 0;
top: 0;
padding: 16px;
overflow: hidden;
background-color: #fff!important;
color: #333!important;
box-sizing: border-box;
}
.nav-right {
float: right!important;
}
.navbar .nav-button {
padding: 16px;
}
.navlogo {
width: auto;
height: 55px;
margin: -17px 0px 0px 0px;
padding: 0 10px;
vertical-align: middle;
}
.navbar .navbar-item {
padding: 8px 16px;
float: left;
width: auto;
border: none;
display: block;
outline: 0;
}
.navbar-block .navbar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0;
}
/* Full height header */
.header {
background-position: center;
background-size: cover;
background-image: url("../images/headerImage.jpg");
min-height: 100%;
}
/* Media Queries */
@media (max-width: 600px) {
.hide-mobile: {
display: none!important;
}
}
@media (min-width: 601px) {
.hide-desktop: {
display: none!important;
}
} <div class="container">
<div class="navbar" id="myNavigation">
<!-- Site logo to the left -->
<a href="#home"><img class="navbar-item navlogo" src="images/logo.png"></a>
<!-- Menu links to the right -->
<div class="nav-right hide-mobile">
<a href="#about" class="navbar-item nav-button"><i class="fa fa-home"></i> HOME</a>
<a href="#about" class="navbar-item nav-button"><i class="fa fa-lightbulb-o"></i> ABOUT</a>
<a href="#about" class="navbar-item nav-button"><i class="fa fas fa-list-ol"></i> SERVICES</a>
<a href="#about" class="navbar-item nav-button"><i class="fa fa-th"></i> PORTFOLIO</a>
<a href="#about" class="navbar-item nav-button"><i class="fa fa-envelope"></i> CONTACT</a>
</div>
<!-- Hide floating links on mobile and give mobile menu -->
<a href="javascript:void(0)" class="navbar-item nav-button nav-right hide-desktop" onclick="nav_open()"><i class="fa fa-bars"></i></a>
</div>
</div>
<!-- Header with full-height image -->
<header class="header" id="home">
<div class="w3-display-left w3-text-white" style="padding:48px">
<span class="w3-jumbo w3-hide-small">Start something that matters</span><br>
<span class="w3-xxlarge w3-hide-large w3-hide-medium">Start something that matters</span><br>
<span class="w3-large">Stop wasting valuable time with projects that just isn't you.</span>
<p><a href="#about" class="w3-button w3-white w3-padding-large w3-large w3-margin-top w3-opacity w3-hover-opacity-off">Learn more and start today</a></p>
</div>
<div class="w3-display-bottomleft w3-text-grey w3-large" style="padding:24px 48px">
<i class="fa fa-facebook-official w3-hover-opacity"></i>
<i class="fa fa-instagram w3-hover-opacity"></i>
<i class="fa fa-snapchat w3-hover-opacity"></i>
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
</div>
</header>You have a : after both of the classes you put in your media queries.
.hide-mobile: {
should be
.hide-mobile {
and same for the .hide-desktop class