Когда вы изменяете размер окна, основная навигация должна исчезнуть с 767px, но исчезает с 770px.
В HTML-коде есть комментарий об этом необычном поведении, если вы полностью удалите раздел, а затем кодработает нормально.
Файл javascript - это основной файл. Я поместил комментарий в файл js, где проблема, кажется, есть.
Сделайте размер окна вывода полным, а затем медленно измените размер.точка, то главное меню исчезнет до фактической точки останова.https://jsfiddle.net/h8vtbxjx/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="queries.css">
</head>
<body>
<div id="outer-background">
<div class="container inner-background">
<header>
<nav>
<a href="#"><img src="css/img/logo.png" class="logo" alt="logo"></a>
<a href="#"><img src="css/img/logo-sticky.png" class="logo-black" alt="logo"></a>
<ul class="main-nav js--main-nav">
<li><a href="http://google.com">Home</a></li>
<li><a href="#explore">Explore</a></li>
<li><a href="#">Add A Post</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</nav>
<h1 class="ion-android-share-alt"> Share with the world</h1>
</header>
<!--Unusual behavior if you remove the below section completely then the code works fine -->
<section class="blog-index js--blog-index" id="explore">
<h2 class="fancy-heading">Explore</h2>
<div class="row">
<div class="col span-1-of-3 img-border">
<figure class="tile-photo">
<h3 class="index-post-title">This is Post</h3>
<img src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" alt="Paleo steak with vegetables">
<figcaption class="index-post-content">This is A post</figcaption>
<a href="#" class="btn">Read More</a>
</figure>
</div>
</div>
</section>
</div> <!-- container -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Css для навигации
header {
height: 240px;
}
header h1 {
padding-top: 150px;
text-align: center;
text-transform: uppercase;
word-spacing: 10px;
color: rgba(240, 238, 238, 0.67);
font-size: 160%;
line-height: 145%;
color: rgb(19, 109, 128);
}
/***************** MAIN NAV *****************/
.main-nav {
float: right;
list-style: none;
margin-top: 15px;
margin-right: 26px;
}
.main-nav li {
display: inline-block;
margin-right: 22px;
}
.main-nav li:last-child {
margin-right: 0;
}
.main-nav li a {
text-decoration: none;
text-transform: uppercase;
color: rgb(19, 109, 128);
word-spacing: 2px;
font-size: 81%;
font-weight: 400;
letter-spacing: 1px;
}
/*********** STICKY NAV **************/
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 2px 2px rgba(25, 147, 177, 0.31);
z-index: 9999;
}
.sticky .logo { display: none; }
.sticky .logo-black { display: inline-block; }
/************ MOBILE NAV ************/
.mobile-nav-icon {
padding-top: 20px;
padding-left: 40px;
cursor: pointer;
float: right;
margin-right: 20px;
display: none;
}
.mobile-nav-icon i {
font-size: 150%;
color: #d3d3d3;
}
Медиа-запросы
/* Small tablets to large tablets 768px TO 1023px */
@media only screen and (max-width: 1023px) {
}
/*Small phones to small tablets 481 to 767px */
@media only screen and (max-width: 767px) {
.main-nav { display: none; }
.mobile-nav-icon {
display: inline-block;
position: relative;
z-index: 9999;
}
.mobile-nav-icon i { color: #a29e9e; }
.main-nav {
float: none;
position: absolute;
z-index: 8888;
width: 100%;
height: 100vh;
margin: 0;
margin-left: -2%;
background-color: rgba(14, 116, 129, 0.95);
text-align: center;
padding-top: 20vh;
}
.main-nav li {
display: block;
margin-left: 0;
font-size: 110%;
}
.main-nav li a:link,
.main-nav li a:visited {
display: block;
border: 0;
padding: 10px 0;
font-size: 100%;
color: #363535;
}
.logo {
margin-left: 10px;
}
}
/* Small phones from 0 to 480px */
@media only screen and (max-width: 480px) {
.logo {
height: 70px;
width: auto;
margin-left: 10px;
margin-top: 5px;
}
.logo-black {
margin-left: 8px;
margin-top: 5px;
}
.footer-icons {
float: left;
margin-left: 16px;
}
footer p {
font-size: 90%;
}
}
Javascript
$('.js--blog-index').waypoint(function(direction) {
if (direction == "down") {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
}, {
offset: '60px;'
});
//Mobile nav
$('.js--nav-icon, .js--main-nav a, .logo-black').click(function(element){
var nav = $('.js--main-nav');
var icon = $('.js--nav-icon i');
//Gets the class name of the element that triggered the event
var clicked = element.target.className;
//Exists the function if the menu is closed AND the logo-black element (logo image) was clicked
if (icon.hasClass('ion-navicon-round') && clicked == 'logo-black')
return;
//Opens and closes the menu
if ($(window).width() < 768){
nav.slideToggle(200);
}
//Changes icon states of the menu button
if (icon.hasClass('ion-navicon-round')) {
icon.addClass('ion-close-round');
icon.removeClass('ion-navicon-round');
} else {
icon.addClass('ion-navicon-round');
icon.removeClass('ion-close-round');
}
});
//if you remove the below code the main nav disappears at the correct point 767px but without this code the main nav will not reappear if you resize the window to more than 767px
$(window).resize(function(){
var nav = $('.js--main-nav');
var icon = $('.js--nav-icon i');
if ($(window).width() > 767){
nav.css("display", "block");
icon.addClass('ion-close-round');
icon.removeClass('ion-navicon-round');
} else {
nav.css("display", "none");
icon.addClass('ion-navicon-round');
icon.removeClass('ion-close-round')
}
});