Develop Reference

Issues with Bootstrap NavBar Submenu changing position on click

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;
});
}
});

CSS: Failing to display unless refreshed - Navigation bar

I have been working on navigation bar and the strangest issue is occurring.
Please use the JSFiddle link to see what I mean.
To duplicate the error:
Run the code when the desktop view is active i.e. when the navigation links are in a line.
Then resize the screen till the "click me" is displayed.
Then press it.
Now run the code while you see the "click me" and press it again.
JS information
jQuery(document).ready(function($) {
// UserCP
$('.rotate').on('click', function() {
$(this).toggleClass("down");
});
$('.nav-start').on('click', function() {
$("#nav2").removeClass("hidden");
$('#nav2 li a').stop().slideToggle('100');
return false;
});
$(document).ready(function() {
$('#nav2 li a').stop().slideToggle('100');
});
$('body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length) {
if ($('#nav2 li a').is(":visible")) {
$('html, body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
};
};
});
});
FIXED - UPDATED JSFiddle! Thanks #Louys Patrice Bessette #Titus #Rick

You are using two click events on this "Click me" li...
(One on .navstart and one on .rotate)
It may not be an issue, but this make the code harder to read.
Then, when you slideToggle(), if you want the submenu to slide down, it has to be hidden.
Because, since you remove the hidden class (probably usefull on load), the submenu is visible.
A Toggle hides it.
I simplified your script to this.
Have a look at this updated Fiddle.
$(document).ready(function() {
// Show submenu on "Click me"
$('.nav-start').on('click', function() {
$('.rotate').toggleClass("down");
$("#nav2").removeClass("hidden");
var subNav = $('#nav2 li a');
if(subNav.css("display")=="block"){
subNav.stop().slideUp('100');
}else{
subNav.stop().slideDown('100');
}
return false;
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
// Hide submenu on document click
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length && $('#nav2 li a').is(":visible")) {
$('#nav2 li a').stop().slideUp('100');
};
});
});

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

Basic issue with jQuery Accordion

I am using a jQuery Accordion for my sidebar navigation. Currently I have 2 links which both have 'children' beneath them.
Here is my jsFiddle: http://jsfiddle.net/6Eh8C/
You'll notice that when you click 'About Us', the Gallery closes. This shouldn't happen. Gallery should only close when I click 'Gallery'.
How do I fix this?
Here is my jQuery:
jQuery(function($) {
$('#accordion > li > a').click(function (e) {
if ($(this).next('ul').length == 0) {
// link is for navigation, do not set up accordion here
return;
}
// link is for accordion pane
//remove all the "Over" class, so that the arrow reset to default
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
$(this).siblings('ul').slideUp("slow");
});
//showhide the selected submenu
$(this).siblings('ul').slideToggle("slow");
//addremove Over class, so that the arrow pointing downup
$(this).toggleClass($(this).attr('rel') + 'Over');
e.preventDefault();
});
$('.slides_item').children('div').css('background','#ededed')
});
Many thanks for any pointers :-)

I think you just want to remove one line:
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
// Remove this line, you don't want to slide up other uls.
// $(this).siblings('ul').slideUp("slow");
});
Example: http://jsfiddle.net/6Eh8C/1/

jQuery Accordion and active link

i use the followig accordion menu:
function initMenu() {
$('#submenu ul').hide();
//$('#submenu ul:first').show();
$('#submenu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#submenu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() { initMenu(); });
now, when a link in the #submenu list gets active, the accordion closes and i have to open it up again when chooseing another link from the #submenu. my question: how can i tell this script, that when a li in the #submenu list has the class .active_link, the accordion opens automatically that current ul #submenu list?
the .active_link class is only set, when the link is active!
you understand my question? :)
thanks and regards!

Try triggering a click on it when the dom is ready:
$('#submenu li a.active_link').click();