Skip to content

Instantly share code, notes, and snippets.

@nickdavis
Created November 19, 2016 13:02
Show Gist options
  • Save nickdavis/9636a96d8a3d82bba439ec7db6dab02f to your computer and use it in GitHub Desktop.
Save nickdavis/9636a96d8a3d82bba439ec7db6dab02f to your computer and use it in GitHub Desktop.
Always show expanded menu (and hide menu pulldown button) on larger screens in Remobile Pro theme by StudioPress (regular 'mobile' menu continues to work in correct way). As seen on GenesisWP.guide at the time of writing.
jQuery(function( $ ){
// Enable responsive menu icon for mobile
$(".nav-primary .genesis-nav-menu").addClass("responsive-menu").after('<div class="responsive-menu-icon"></div>');
$(".responsive-menu-icon").click(function(){
$(".nav-primary .genesis-nav-menu").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 799) {
$("nav .sub-menu").removeAttr("style");
$(".responsive-menu").removeAttr("style"); // Changed from default
$(".responsive-menu > .menu-item").removeClass("menu-open");
}
});
$(".responsive-menu > .menu-item").click(function(event){
if (event.target !== this)
return;
$(this).find(".sub-menu:first").slideToggle(function() {
$(this).parent().toggleClass("menu-open");
});
});
});
/* Responsive Menu
--------------------------------------------- */
.responsive-menu {
display: block; /* Changed from default */
}
.responsive-menu-icon {
cursor: pointer;
display: none; /* Changed from default */
text-align: center;
}
@media only screen and (max-width: 800px) {
/* Other CSS rules */
.responsive-menu-icon {
display: inline-block;
}
/* Other CSS rules */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment