We Keep Coding

Navigation menu items conflict

The problem is with 2nd and 3rd menu item. Whenever I click the 3rd menu item, the 2nd menu item automatically gets selected/active along with the 3rd one. However, this doesn't happen with other menu items.
For instance(when clicking on the third menu item);
<ul id="menu-1" class="navmenu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464">
list item 1
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-456 current_page_item menu-item-466">
list item 2
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-446">
list item 3
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-448">
list item 4
</li>
</ul>
Note: I have no clue where those different class on click are coming from.
I tried to add an active class on click and style accordingly but this didn't work. For instance;
JQuery(function(){
jQuery('.navmenu li').on('click', function(){
jQuery(this).addClass('active').siblings().removeClass('active');
});
});
Here is the css :
.navmenu .current_page_item>a, .navmenu .current_page_ancestor>a, .navmenu .current-menu-item>a, .navmenu .current-menu-ancestor>a {
outline: none;
background-color: #7CD0AE;
color: #fff;
}
It's strange why the class on 2nd menu item has current-menu-item and current-page-item indexed when i click on the third one.

Do you have the CSS to look at? A github or jsfiddle of the relevant code would make it lot easier to help.
I replicated what you have here, and if you hover over each list item you can see they have the correct link. Seems like it's probably in the css, or else something not shared here.
https://jsfiddle.net/xpvt214o/814134/
The code below is because they make me add code when I link a jsfiddle
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.addClass("alt")
})
JQuery(function(){
jQuery('.navmenu li').on('click', function(){
jQuery(this).addClass('active').siblings().removeClass('active');
});

jquery click event won't trigger even with the right selector?

I'm not really a jquery expert so please bear with me. I have "googled" but couldn't find any solution.
Here is the code:
<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
<ul id="primary-menu" class="navbar-nav text-uppercase">
<li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item">Home</li>
<li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
<li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item">Portfolio</li>
<li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item">About</li>
</ul>
Here is the portion of the script/snippet:
(function($) {
"use strict"; // Start of use strict
$('a.nav-link.js-scroll-trigger').click(function(e) {
console.log(e);
});
$('.js-scroll-trigger').on('click', 'a', function(e) {
console.log(e);
});
$('li').find('a.js-scroll-trigger').click(function(e) {
console.log(e);
});
$('a').click(function(e) {
console.log(e);
});
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
if (location.pathname.replace(/^\//, '') ==
this.pathname.replace(/^\//, '') && location.hostname ==
this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +
']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 54)
}, 1000, "easeInOutExpo");
return false;
}
}
});
The problem is that it only triggers $('a') and ignores the rest of the selectors.
I have tried checking it on the browser:
console - https://www.screencast.com/t/sikIcYY1J
sources using debugger -- https://www.screencast.com/t/TgbNhIb1usy
It appears that it was targeting the correct selectors but fails to trigger the condition as shown above. My smooth scrolling won't work anymore unless I place $('a') as the only condition. It used to work few days before, I dunno what happened. Something must have triggered it not to work. Could someone please enlighten me? Answers would really be appreciated, many thanks...

change target.length to $(target).length
add e.preventDefault();
fix var target = this.hash;
but, why do you need this for? if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
All you need is this:
$(function() {
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
e.preventDefault();
var target = this.hash;
if ($(target).length) {
$('html, body').animate({
scrollTop: ($(target).offset().top - 54)
}, 1000, "easeInOutExpo");
return;
}
});
});
Anyway, here is the fix to your script.
$(function() {
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
e.preventDefault();
if (location.pathname.replace(/^\//, '') ==
this.pathname.replace(/^\//, '') && location.hostname ==
this.hostname) {
var target = this.hash;
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if ($(target).length) {
$('html, body').animate({
scrollTop: ($(target).offset().top - 54)
}, 1000, "easeInOutExpo");
console.log(target);
return;
}
}
});
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
<ul id="primary-menu" class="navbar-nav text-uppercase">
<li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item">Home</li>
<li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
<li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item">Portfolio</li>
<li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item">About</li>
</ul>
</div>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p>ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p id="services">ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwgv</p>

Change your JS "(function($) {" to this:
$(document).ready(function() {
With this, the events work for me.

It is a syntax error.
(function($) {
should need to change
$(function() {
DEMO

I have another script which I made that adds classes to make the smooth scrolling work. It was called AFTER the script above, so I moved it BEFORE inside the functions.php (Wordpress). The scripts started to work again. Silly of me not to notice that. Sorry for the trouble, & thank you, guys...

Add and Remove Class to Element with JavaScript on mouseEnter

I'd like to be able to add and remove classes based on the users mouse moving over certain areas. Below is the navigation code as generate by WordPress:
<nav id="site-navigation" class="main-navigation" role="navigation" data-small-nav-title="Navigation">
<ul id="menu-new-blog-main-2" class="nav-bar clearfix">
<li id="menu-item-10168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10168">About Proforma</li>
<li id="menu-item-10169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10169">Proforma.com</li>
<li id="menu-item-10170" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10170">Contact Us</li>
</ul>
</nav>
I've come up with the following JavaScript that targets the <li> in order to change the class of the link within the <li>:
<script>
$(document).ready(function(){
$('#site-navigation li').mouseenter(function(){
$(this).find('li.menu-item a').addClass('animated, bounceIn');
//$(this).find('.span').addClass('fadeInUp');
});
$('#site-navigation li'').mouseleave(function(){
$('#site-navigation li'').find('li.menu-item a').removeClass('animated, bounceIn');
//$('#site-navigation li').find('.span').removeClass('animated, fadeInUp');
});
});
</script>
I've checked the Console and it looks like the event isn't even firing for the code to work. Any help is greatly appreciated.

Check out this fiddle.
Here is the snippet. (I have added alert on enter and leave events for testing).
$(document).ready(function() {
$('#site-navigation li').mouseenter(function() {
alert("Enter " + $(this).text());
$(this).find('li.menu-item a').addClass('animated, bounceIn');
//$(this).find('.span').addClass('fadeInUp');
});
$('#site-navigation li').mouseleave(function() {
alert("Leave " + $(this).text());
$('#site-navigation li').find('li.menu-item a').removeClass('animated bounceIn');
//$('#site - navigation li ').find('.span ').removeClass('animated, fadeInUp ');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation" role="navigation" data-small-nav-title="Navigation">
<ul id="menu-new-blog-main-2" class="nav-bar clearfix">
<li id="menu-item-10168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10168">About Proforma
</li>
<li id="menu-item-10169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10169">Proforma.com
</li>
<li id="menu-item-10170" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10170">Contact Us
</li>
</ul>
</nav>

When adding/removing classes with jQuery, they should be space separated, not comma separated. So:
$(this).find('li.menu-item a').addClass('animated bounceIn');
Also, you shouldn't nest your mouseleave inside your mouseenter functions. Also, you should use $.on instead.
Also, within your event handlers, you aren't accessing your elements correctly. $(this) refers to the element that has been entered or left. Since you've set the mouseenter handler on the <li> elements, $(this).find('li.menu-item a') finds nothing.
Try this:
// It's often best practice to cache jQuery objects
// so you're not looking up the elements multiple times.
var $listItems = $('#site-navigation li');
$listItems.on('mouseenter', function(){
$(this).find('a').addClass('animated bounceIn');
});
$listItems.on('mouseleave', function(){
$(this).find('a').removeClass('animated bounceIn');
});
All of this said, if you're simply trying to have an animation on hover, you can achieve that in CSS only with a single class on your <a> elements. The jQuery might be overkill, here.

$('#site-navigation li'')
should be either
$('#site-navigation li')
or
$("#site-navigation li")
(You have wrong quote marks)
and prevent using selector's repetition, do it like this:
var $el = $('#site-navigation li')
$el.mouseenter(function(){
$(this).find('li.menu-item a').addClass('animated bounceIn');
$(this).find('.span').addClass('fadeInUp');
});
$el.mouseleave(function() {
$(this).find('li.menu-item a').removeClass('animated bounceIn');
}
For further reading: http://www.sitepoint.com/efficient-jquery-selectors/
Good Luck

jQuery Dropdown Menu Doesn't Stay Down

I've created a dropdown menu in a site built on Wordpress. It works, but there's a problem; when the mouse hovers over the menu items, the dropdown menu keeps sliding up and down.
HTML
<nav>
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-20">Art Services
<ul class="sub-menu">
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93">Home</li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92">Business</li>
</ul>
</li>
</ul></div>
</nav>
jQuery
$(document).ready(function() {
$(".menu-item").hover(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).find(".sub-menu").slideDown('fast').show(); //Drop down the subnav on click
$(this).hover(function() {
}, function(){
$(this).find(".sub-menu").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover").css('display','block'); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
Thanks!

The ".sub-menu" list is nested inside the 'menu-item', right? So you don't need a to trigger another hover() event. You can trim it down to:
$(document).ready(function () {
$(".menu-item").hover(function () {
//HOVER IN
$(this).addClass("subhover");
$(this).find(".sub-menu").stop().slideDown('fast');
}, function () {
//HOVER OUT
$(this).removeClass("subhover");
$(this).find(".sub-menu").stop().slideUp('slow');
});
});
And add stop() to stop extra running animation when user hover's in and out.
See demo here: jsfiddle.net/AbkXM/

Making a nav menu that becomes sticky as the page scrolls down

I have two menus in use on a site I'm building. The second menu is a category menu, and I need to make it stick to the top of the page as a user scrolls down the page to view content. I had it working previously, but had to remove some elements from my header. For whatever reason, it won't work now. Code to follow.
<script type="text/javascript">
function sticky_relocate() {
var window_top = jQuery(window).scrollTop();
var div_top = jQuery('#scroller-anchor').offset().top;
if (window_top > div_top)
jQuery('#navbar').addClass('sticky')
else
jQuery('#navbar').removeClass('sticky');
}
jQuery(function() {
jQuery(window).scroll(sticky_relocate);
sticky_relocate();
});</script>
And the menu structure looks like this...
<div id="scroller-anchor"></div>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle">Menu</h3>
<a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>
<div class="menu-category-menu-container">
<ul id="menu-category-menu" class="nav-menu">
<li id="menu-item-1408" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1408">
All
</li>
<li id="menu-item-1414" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1414">
Videos
</li>
<li id="menu-item-1409" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1409">
Entertainment
</li>
<li id="menu-item-1412" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1412">
Politics
</li>
<li id="menu-item-1413" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1413">
Sports
</li>
<li id="menu-item-1410" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1410">
Fashion
</li>
</ul>
</div>
</nav><!-- #site-navigation -->
</div>
Help?
EDIT
Forgot to include what was in the sticky class.
.sticky {
position: fixed;
top: 0;
}
EDIT2
Attempted the following fix, still to no avail.
<script type="text/javascript">
var position_to_make_nav_sticky = jQuery('#scroller-anchor').offset().top; //get the Y-position of section
jQuery(window).on({ scroll:function(){ // fires when user scrolls
var current_position = window.pageYOffset; // get the current window Y-Position
if( current_position > position_to_make_nav_sticky )
{ jQuery('#navbar').addClass('sticky'); // add class to make the nav sticky using css
} else { jQuery('#navbar').removeClass('sticky'); // remove sticky css class } });
</script>

for anyone interested in making a sticky nav on scroll:
<script type="text/javascript">
var position_to_make_nav_sticky = jQuery('#scroller-anchor').offset().top; //get the Y-position of section
jQuery(window).on({
scroll:function(){ // fires when user scrolls
var current_position = window.pageYOffset; // get the current window Y-Position
if( current_position > position_to_make_nav_sticky ) {
jQuery('#navbar').addClass('sticky'); // add class to make the nav sticky using css
} else {
jQuery('#navbar').removeClass('sticky'); // remove sticky css class
}
}
});