I'm struggling to implement a mobile menu for my website.
After adding the necessary code, when I view the page in a mobile viewport, all I see are two sets of periods ("..."). However, unlike in the code snippet provided, the list does appear on the page. The problem arises when the viewport reaches a certain size, causing the periods to show instead. I've confirmed that the meta viewport code and JQuery library are correctly implemented.
What am I missing or doing wrong?
$(document).ready(function(){
$(function() {
// Insert Responsive Navigation Icon, Close Icon, and Overlay
// If you have access to your HTML, you should put this directly into your markup.
$('<div class="responsive-nav-icon" />').appendTo('.row.one');
$('<div class="responsive-nav-close" />').appendTo('nav');
$('<div id="overlay" />').insertAfter('footer');
// Navigation Slide In
$('.responsive-nav-icon').click(function() {
$('nav').addClass('slide-in');
$('html').css("overflow", "hidden");
$('#overlay').show();
return false;
});
// Navigation Slide Out
$('#overlay, .responsive-nav-close').click(function() {
$('nav').removeClass('slide-in');
$('html').css("overflow", "auto");
$('#overlay').hide();
return false;
});
});
});.responsive-nav-icon::before,
.responsive-nav-close::before {
color: #93a748;
content: "\f0c9";
font-family: FontAwesome;
font-size: 22px;
position: relative;
}
.responsive-nav-close::before {
color: #93a748;
content: "\f00d";
font-size: 18px;
}
.responsive-nav-icon {
background: #fff;
line-height: normal;
padding: 5px 8px 4px;
top: 5%; left: 5%;
}
.responsive-nav-icon:hover,
.responsive-nav-close:hover {
opacity: .7;
}
.responsive-nav-close {
top: 10px; right: 10px;
}
.responsive-nav-icon,
.responsive-nav-close {
cursor: pointer;
display: none;
}
#overlay {
background: 0 0 rgba(0, 0, 0, 0.8);
display: none;
height: 100%;
position: fixed;
top: 0; left: 0;
-moz-transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
width: 100%;
z-index: 90;
}
@media only screen and (max-width: 960px) {
.responsive-nav-icon,
.responsive-nav-close {
display: block;
position: absolute;
z-index: 1;
}
nav {
height: 100%;
padding: 20px;
position: fixed;
top: 0; left: -400px;
-moz-transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
width: 0;
}
nav.slide-in {
left: 0;
overflow-y: scroll;
width: 280px;
z-index: 100;
}
nav .menu-item {
display: block;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="site-header" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div class="wrap">
<nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation">
<ul class="menu">
<li class="menu-item">
<a href="#">Home</a>
</li>
<li class="menu-item">
<a href="#">About</a>
</li>
<li class="menu-item">
<a href="#">Blog</a>
</li>
<li class="menu-item">
<a href="#">Login</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="content" itemprop="mainContentOfPage" role="main">
...
</main>
<footer class="site-footer" itemtype="http://schema.org/WPFooter" itemscope="itemscope" role="contentinfo">
...
</footer>