Skip to content

Instantly share code, notes, and snippets.

@mjsdiaz mjsdiaz/drop-down-nav.js
Last active Aug 29, 2015

Embed
What would you like to do?
Responsive Website Navigation for Genesis WordPress Themes - Primary and Secondary Navigation - https://amethystwebsitedesign.com/responsive-website-navigation-for-genesis-wordpress-themes/
jQuery( function($) {
'use strict';
// Insert mobile menu icon before the primary navigation ul
$( '<div id="menu-primary-mobile">&#8801; Menu</div>' ).insertBefore( 'ul.menu-primary' );
// Add .displaynone class to ul.menu-primary to hide ul.menu-primary for small screen sizes
$( 'ul.menu-primary' ).addClass( 'displaynone' );
// Toggle nav for mobile menu
$('#menu-primary-mobile').click (function(){
$('.menu-primary').slideToggle();
$(this).toggleClass('active');
});
// Insert mobile menu icon before the secondary navigation ul
$( '<div id="menu-secondary-mobile">&#8801; Menu</div>' ).insertBefore( 'ul.menu-secondary' );
// Add .displaynone class to ul.menu-secondary to hide ul.menu-secondary for small screen sizes
$( 'ul.menu-secondary' ).addClass( 'displaynone' );
// Toggle nav for mobile menu
$('#menu-secondary-mobile').click (function(){
$('.menu-secondary').slideToggle();
$(this).toggleClass('active');
});
});
<?php
// Note: Add only code below to your functions.php
add_action( 'wp_enqueue_scripts', 'amethyst_load_mobile_nav_script' );
function amethyst_load_mobile_nav_script() {
//Add mobile button script to primary navigation menu
wp_enqueue_script( 'nav_for_mobile', get_bloginfo( 'stylesheet_directory' ) . '/scripts/drop-down-nav.js', array('jquery'), '0.5' );
}
@media only screen and (max-width: 768px) {
/* Start Mobile Menu Navigation - Only on .nav-primary and .nav-secondary
--------------------------------------------------- */
/* Hide .nav-primary and .nav-secondary*/
.nav-primary .genesis-nav-menu.displaynone,
.nav-secondary .genesis-nav-menu.displaynone {
display: none;
}
.nav-primary,
.nav-secondary {
text-align: center;
}
.nav-primary #menu-primary-mobile,
.nav-secondary #menu-secondary-mobile {
background-color: #333;
color: #999;
cursor: pointer;
display: block;
font-family: Lato, sans-serif;
font-size: 18px;
font-size: 1.8rem;
height: auto;
line-height: 18px;
padding: 20px 16px;
padding: 2rem 1.6rem;
text-transform: uppercase;
}
.nav-primary #menu-primary-mobilee:hover,
.nav-primary #menu-primary-mobile:focus,
.nav-primary #menu-primary-mobile:active,
.nav-secondary #menu-secondary-mobile:hover,
.nav-secondary #menu-secondary-mobile:focus,
.nav-secondary #menu-secondary-mobile:active{
background-color: #333;
color: #fff;
display: block;
}
/* .nav-primary and .nav-secondary is mobile */
.nav-primary .genesis-nav-menu .menu-item,
.nav-primary .genesis-nav-menu a,
.nav-primary .genesis-nav-menu .sub-menu,
.nav-secondary .genesis-nav-menu .menu-item,
.nav-secondary .genesis-nav-menu a,
.nav-secondary .genesis-nav-menu .sub-menu{
text-align: center;
width: 100%;
}
.nav-primary .genesis-nav-menu .menu-item > .sub-menu,
.nav-secondary .genesis-nav-menu .menu-item > .sub-menu{
clear: both;
margin: 0;
opacity: 1;
position: inherit;
width: 100%;
}
}
@media only screen and (min-width: 769px) {
/* This makes the nav menu normal again when the browser window expands */
.nav-primary .genesis-nav-menu,
.nav-secondary .genesis-nav-menu{
display: block !important;
height: auto;
}
/* Hide Mobile Menu Button */
.nav-primary #menu-primary-mobile,
.nav-secondary #menu-secondary-mobile {
display: none;
height: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.