I am using nav walker for bootstrap in wordpress.
I have added a Custom Nav item from admin panel under menus. That custom item has 3 sub pages, when I go to one of the pages under that custom item, the page link highlights and the class "active" applies but I want the custom nav item or parent nav item to be active also.
How can I do this?
I tried below code but this doesn't work
<script language="javascript">
$(document).ready(function(){
var currentLocation = location.pathname;
if (currentLocation == "media-gallery/pictures"){
$("#menu-item-140").addClass("active");
}
});
</script>
<script language="javascript">
$(document).ready(function(){
var currentLocation = location.pathname;
alert(currentLocation);
// if (currentLocation == "media-gallery/pictures"){
// $("#menu-item-140").addClass("active");
// }
});
</script>
<script language="javascript">
$(document).ready(function(){
var currentLocation = location.pathname;
// alert(currentLocation);
if (currentLocation == "/media-gallery/pictures"){
$("#menu-item-140").addClass("active");
}
});
</script>
:)
EDIT:
To clarify, this code is fully tested, and works, assuming your file is located at http://example.com/test/blank.php. Please note the leading slash.
<style>
.active{
background-color: red;
}
</style>
<div id="menu-item-140">Make me red</div>
<script language="javascript">
$(document).ready(function(){
var currentLocation = location.pathname;
alert(currentLocation);
if (currentLocation == "/test/blank.php"){
$("#menu-item-140").addClass("active");
}
});
</script>