Develop Reference

Responsive menu not closing on item selection

EDIT: I'm not trying to be pushy but if someone knows how to help me with this, I'd really appreciate it.
www.kwpei.com is the site I'm working on, the issue I'm having is with the responsive menu not closing after a menu or submenu item is chosen. Ive been told the place to make the change needed is in global.js which I've included here in its current state. Could someone show me how to fix the issue?
jQuery(function( $ ){
$('.site-header').addClass('front-page-header');
$('.footer-widgets').prop('id', 'footer-widgets');
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');
$(".responsive-menu-icon").click(function(){
$(this).next(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 800) {
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
$(".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");
});
});
// Local Scroll Speed
$.localScroll({
duration: 750
});
// Sticky Navigation
var headerHeight = $('.site-header').innerHeight();
var beforeheaderHeight = $('.before-header').outerHeight();
var abovenavHeight = headerHeight + beforeheaderHeight - 1;
$(window).scroll(function(){
if ($(document).scrollTop() > abovenavHeight){
$('.nav-primary').addClass('fixed');
} else {
$('.nav-primary').removeClass('fixed');
}
});
});

You can slide up the menu again on clicking any of the menu items. Try adding this bit of jquery:
$('.menu-item a').click(function () {
$('.responsive-menu').stop(true, true).slideUp();
});
EDIT:
$('.menu-item a').click(function () {
if ($(window).width() < 800) {
$('.sub-menu').stop(true, true).slideUp();
$('.responsive-menu').stop(true, true).slideUp();
$('.menu-item').removeClass('menu-open');
}
});
If 800px is your breakpoint in the media query

Header appear on scroll does not work on mobile

I am having a struggle with a header bar that appears on scrolling.
On desktop it works fine, but on mobile it does not fade in.
Here is my code.
$(window).scroll(function() {
if ($(this).scrollTop() > 400) {
$( "#navbar" ).fadeIn();
} else {
console.log('there');
$( "#navbar" ).fadeOut();
}
});
Also a fiddle: https://jsfiddle.net/rvovapxk/

Move content on window resize

I am using the following jQuery to move content from the top of the main content column in mobile view to the top of the sidebar when in desktop view.
if (ww >= 768) {
$( '#move-me' ).insertBefore($( '#top-widget' ) );
}
Here's a fiddle:
http://jsfiddle.net/richerimage/co6nw6va/1/
This works fine on page load, but I'd like the content to be able to move back and forth on window re-size
Like all things, I guess this is easy if you know how! :)
Any help is greatly appreciated
With thanks
Richard
p.s. also, is there a way to move the content to the top of the #sidebar without the need to reference the #top-widget?

Try this:
$( document ).ready(function() {
doThis();
});
$( window ).resize( function() {
doThis();
});
function doThis(){
var ww = document.body.clientWidth;
if (ww >= 768) {
$( '#move-me' ).insertBefore($( '#top-widget' ) );
}else{
$( '#move-me' ).insertBefore($( '.post_content' ) );
}
}
Check JSFiddle Demo

So you need to use resize event handler:
$( window ).resize( function() {
var ww = document.body.clientWidth;
if (ww >= 768) {
$( '#move-me' ).insertBefore($( '#top-widget' ) );
}
});
jsFiddle

jQuery Collapse when scroll

I need help here... I have a menu that is collapsible, when the page starts I want to stay open but when scroll down I want to be collapsed... Is there any option for that?
$('#slide-button').click(function(){
$('#menu-list').animate({width: 'toggle'},500);
$(this).toggleClass('inactive');
});
Here is my site http://astritbublaku.com/demos/dukagjini/

try this:
$(window).scroll(function(){
if ( $(window).scrollTop() > 0 ) {
$('#menu-list').animate({"width": minWidth },500);
$(this).addClass('inactive');
}
else
{
$('#menu-list').animate({"width": maxWidth },500);
$(this).removeleClass('inactive');
}
});

You can use following;
$(document).ready(function() {
// Start as opened
$(".book-toggle").trigger("click");
// When scrolled, if collapsible is opened, close it
$(window).scroll(function() {
// Check if it is already closed. It has class 'inactive' when it is open
if ($(".book-box").hasClass("inactive") == false) {
$(".book-toggle").trigger("click");
}
});
});

Window re-size event breaks toggle after resize

I am having an issue with the below code. I created a window re-size event for a toggle div. The purpose is so when on smaller devices the header will toggle the content, otherwise the content is just displayed as is. The issue I am having is when I refresh the page, it works perfect. The second I resize it and click to toggle, it causes some sort of recursive call 5 times, so it toggles back and forth 5 times. Any suggestions?
$(window).resize(function() {
if ($(window).width() > 767) {
$(".toggle" ).show();
}
else {
$(".toggle" ).hide();
$( ".opener" ).click(function() {
$(this).next('.toggle').slideToggle();
});
}
}).resize();

It is not recommendable to insert a click function inside a resize function, because you are adding click functions to the tag every time you resize. If you add an unbind to the "opener" before the click line it should work.
$(window).resize(function() {
if ($(window).width() > 767) {
$(".toggle" ).show();
}
else {
$(".toggle" ).hide();
$( ".opener" ).unbind("click");
$( ".opener" ).click(function() {
$(this).next('.toggle').slideToggle();
});
}
}).resize();