I’ve implemented a responsive navigation on a custom WordPress 4.x build I am working on. When I test the nav on its own in a regular HTML doc, it works fine. On the WordPress site, however, it doesn’t work. The toggle button that displays the nav on the mobile isn’t toggling.
Here’s a jsfiddle of the working HTML version: http://jsfiddle.net/86jy78q0/
Here is the site: http://pow.digitaldemo.net/
Here’s the HTML structure of my menu:
/* Top Navigation */
.nav {
max-width: 100%;
min-width: 535px;
float: right;
}
/*Strip the ul of padding and list styling*/
.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
background: #ffffff;
position: absolute;
}
/*Create a horizontal list with spacing*/
.nav li {
display: inline-block;
float: left;
}
/*Style for menu links*/
.nav li a {
padding: 0 15px;
font-family: "Conv_GothamMedium", helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
background: #ffffff;
display: block;
height: 20px;
text-align: center;
line-height: 20px;
text-transform: uppercase;
}
/*Hover state for top level links*/
.nav li:hover a {
background: #eeeeee;
}
/*Style for dropdown links*/
.nav li:hover ul.sub-menu a {
background: #ffffff;
color: #000000;
height: 24px;
line-height: 24px;
}
/*Hover state for dropdown links*/
.nav li:hover ul.sub-menu a:hover {
background: #eeeeee;
}
/*Hide dropdown links until they are needed*/
.nav li ul {
display: none;
}
/*Make dropdown links vertical*/
.nav li ul.sub-menu li {
display: block;
float: none;
}
/*Prevent text wrapping*/
.nav li ul.sub-menu li a {
width: auto;
min-width: 100px;
padding: 0 20px;
background: #eeeeee;
border-top: 1px solid #d1d1d1;
}
/*Display the dropdown on hover*/
.nav ul li a:hover + .sub-menu,
.sub-menu:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #000000;
background: #eeeeee;
border-radius: 4px;
border: 1px solid #cccccc;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .menu {
display: block;
}
@media (max-width: 820px) {
/*Make dropdown links appear inline*/
div.nav {
min-width: 100%
}
.nav ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.nav li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.nav ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}<div class="nav">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<div class="menu-top-navigation-container">
<ul id="menu-top-navigation" class="menu">
<li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-7"><a href="http://pow.digitaldemo.net/">Home</a>
</li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://pow.digitaldemo.net/about-us/">About Us</a>
</li>
<li id="menu-item-12" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-12"><a href="http://pow.digitaldemo.net/category/products/">Products</a>
<ul class="sub-menu">
<li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13"><a href="http://pow.digitaldemo.net/category/products/subcat-1/">Subcat 1</a>
</li>
</ul>
</li>
<li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="http://pow.digitaldemo.net/retailers/">Retailers</a>
</li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://pow.digitaldemo.net/press/">Press</a>
</li>
<li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://pow.digitaldemo.net/contact-us/">Contact</a>
</li>
</ul>
</div>
</div>I can’t for the life of me figure out why the mobile menu isn’t toggling.
Any help is appreciated!
Best,
Cynthia
The path to do the display when checked was incorrect, just needed to add the new div class in:
A javascript file,
http://pow.digitaldemo.net/wp-content/themes/powwow/js/default.js, is not being loaded on your test site. It is likely that this file contains the JS to do the behaviour you want.It’s not loaded due to a 404 error – the file cannot be found.