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
Related
I've created a navigation bar with sub menus, using Bootstrap v4.2.1. Hovering OnClick are implemented through Javascript. Problem is whenever I load the page and hover over a submenu item, the menu opens up but appears right below the item. When I click the menu, it disappears and reappears on the right side of the submenu. Ideally, I'd want to have the submenu appear at the right side of the dropdown menu, not appear at the bottom upon initial hover. I'm suspecting that there might be something I might've missed in my Javascript but I could be wrong. Any help/advice would be greatly appreciated.
Here's my fiddle: https://jsfiddle.net/fzev07tb/
//Script to toggle navbar dropdown
$(document).ready(function() {
$('.navbar .dropdown-item').on('click', function(e) {
var $el = $(this).children('.dropdown-toggle');
var $parent = $el.offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if (!$parent.parent().hasClass('navbar-nav')) {
if ($parent.hasClass('show')) {
$parent.removeClass('show');
$el.next().removeClass('show');
$el.next().css({
"top": -999,
"left": -999
});
} else {
$parent.parent().find('.show').removeClass('show');
$parent.addClass('show');
$el.next().addClass('show');
$el.next().css({
"top": $el[0].offsetTop,
"left": $parent.outerWidth() - 4
});
}
e.preventDefault();
e.stopPropagation();
}
});
$('.navbar .dropdown').on('hidden.bs.dropdown', function() {
$(this).find('li.dropdown').removeClass('show open');
$(this).find('ul.dropdown-menu').removeClass('show open');
});
});
//Script for OnHover OnClick NavBar Item -->
jQuery(function($) {
if ($(window).width() > 769) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function() {
location.href = this.href;
});
}
});
I have a back to top button that appears when you scroll a little bit .It's working fine but when scrolling if I get to the footer i want the button to go above the footer.
I used the jquery animate method to change the bottom css rule of the button when I get to the bottom of the page.But that effect doesn't happen instantly on my website because i have more javascript and i think it needs to go through all the code before it runs the effect and It's just not working properly.
Where is the problem ? .Here is what I have done : JSFIDDLE
var offset = 250;
var duration = 500;
$(window).scroll(function () {
if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration);
} else {
$('.back-to-top').fadeOut(duration);
}
});
$('.back-to-top').on('click', function () {
event.preventDefault();
$('html,body').animate({ scrollTop: 0 }, duration);
return false;
});
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
$('.back-to-top').animate({ 'bottom': '400px' });
} else $('.back-to-top').animate({ 'bottom': '10%' });
});
It seems like adding a class that changes the position of the div, and toggling it when the condition is true solved the problem .
I have a fixed menu system that slides out and covers 100% of the screen once it is pressed. When it is active the the main scrollbar you will have the ability to scroll through the menu in the active div. Once you close the menu the scrollbar will not allow me to scroll the whole site anymore, it will only scroll the length of the div the slides out.
How can I fix this issue? I need the scrollbar to control the menu once it is active, then have the ability to scroll the whole site once the menu is not active.
Here is my JS and the full code http://jsfiddle.net/8P9kh/8/
$(function(){
window.status=0;
$('#menu').click(function(){
if(window.status==0){
$('#slidingMenu').stop().animate({left:'0px'},500);
window.status=1;
$('body, html').css('overflow','hidden');
}
else{
$('#slidingMenu').stop().animate({left:'-100%'},500);
window.status=0;
$('body, html').css('overflow-y','scroll');
}
});
})
//Close menu when you click Footer
$('#more').click(function () {
var open = $('header').is('.open');
$('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=200'
}, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('').is('.open')) {
$('')
.removeClass('open')
.animate({
'bottom': "-=200"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('footer').slideUp(400);
}
});
$('.footerButton').click(function () {// Change wording once pressed
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=200"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#dropFooter').slideToggle(400);
}
}
});
Right now, you're setting the CSS overflow property to hidden when the menu shows up, but then setting overflow-x property to scroll, leaving the overflow property at hidden. Reset the overflow property back to auto:
$('body, html').css('overflow', 'auto');
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");
}
});
});
I have added an "active" class to the current item in a menu bar and have implemented a Smooth Scroll feature to it as well. ( http://jsfiddle.net/T98VG/ )
I want the background color of the item to change in the menu bar but this doesn't seem to be working properly. So far, the background color of the link in the menu bar changes, not the container the link is in. How can I implement this?
jQuery code used to add "active" state to current item (this works fine):
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('#nav a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('#nav a').each(function () {
$(this).removeClass('current');
});
$(this).addClass('current');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-0
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#nav a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#nav a').removeClass("current");
currLink.addClass("current");
}
else{
currLink.removeClass("current");
}
});
}
Here's a JSFiddle with the code I have so far and the problem ( http://jsfiddle.net/T98VG/ ). In the menu bar with 4 items: #1, #2, #3 and #4, only the background color of the active link gets highlighted. I'd like the box "nav li" to be filled with the color as well.
I'm new to coding so all help is welcome. Thank you!
You can use the parent() call on each link, and add the current class to the parent of the links (the <li>'s) instead of the links themselves.
See the updated JSFiddle