UPDATE: Problem solved! I discovered that the 'overflow:hidden' inside the #main for the media query was causing the navigation to disappear.
I have a scroll navigation positioned at the top of my webpage. However, as I scroll down, the navigation bar goes underneath the next section and disappears. This issue only started when I added mobile and tablet media queries. Removing the media query stylesheet resolves the problem with the navigation bar display.
HTML Code:
<section id="main">
<nav>
<a href="#about">About</a>
<a href="#motorcycles">Motorcycles</a>
<a href="#coffee">Coffee</a>
<a href="#contact">Contact</a>
</nav>
<h1>Kickstart Cafe</h1> <h2>Coffee shop for the motorcycle enthusiast</h2>
CSS from the media queries:
small phone screen
nav {
display:none;
}
#main {
/*background-image: url('../img/beans.jpg'); */
background-repeat:repeat;
height:400px;
overflow:hidden;
h1 {
font-size:3.25em;
position:relative;
padding-top:35%;
}
h2 {
font-size:1.17em;
}
}
desktop
@import 'styles';
#main {
h2 {
font-size:2.75em;
}
}
nav {
z-index:9999 !important;
}
CSS from the main stylesheet:
#main {
margin:0;
padding:0 0 15% 0;
width:100%;
height:auto;
-moz-box-shadow: inset 0 -20px 10px -15px #000;
-webkit-box-shadow: inset 0 -20px 10px -15px #000;
box-shadow: inset 0 -20px 10px -15px #000;
nav {
text-align:right;
width:100%;
height:50px;
z-index:9999;
position:relative;
top:20px;
a {
color:#fff;
font-size:2em;
text-decoration:none;
margin: 0 15px;
}
}
}
.fixed {
position:fixed;
background:rgba(0,0,0,.6);
top:0;
a {
color:#fff !important;
}
}
jQuery Code:
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('nav').css('top', $(window).scrollTop());
$('nav').addClass('fixed');
} else {
$('nav').css("top", "20px");
$('nav').removeClass('fixed');
}
});