Develop Reference

Adding class to primary-nav link when on a sub-page based on the url

I have primary navigation that are just "in-page" links on the home page. I also have a section of three pages for pricing that live as sub-pages with the urls: /pricing/basic-pricing.html, /pricing/pro-pricing.html and /pricing/pricing-premium.html.
On those three pages, I have a side-nav to get back-and-forth between those pages. So two navigation elements (primary-nav and side nav). When on a sub-page i.e. /pricing/basic-pricing.html, I would like the primary-nav link called "pricing" to have an active class.
I have it working with the code below, but was wondering if there is a better way in case I add more sub-pages in the future. I don't want to have to add more jQuery just to accommodate a new page. Right now it's only looking to see if the url contains the string 'pricing' in the href and then it adds the class to the 'pricing' link in the primary nav.
<nav class="primary-nav">
<ul class="menu collapse vertical large-horizontal">
<li>features</li>
<li>options</li>
<li>pricing</li>
<li>testimonials</li>
<li>contact</li>
</ul>
</nav>
<ul class="vertical menu side-nav">
<li>Basic Pricing</li>
<li>Pro Pricing</li>
<li>Premium Pricing</li>
</ul>
$(document).ready(function () {
$('.side-nav.menu a.is-active[href*="pricing"]').each(function () {
$('.primary-nav .menu a[href$=pricing]').addClass('is-active');
});
});

you can use location global object to detect which url or uri you're in,
here a link t it documentation : link
example:
console.log(location.pathname)
// /questions/56091860/adding-class-to-primary-nav-link-when-on-a-sub-page-based-on-the-url
in you case
// /pricing/basic-pricing.html

How to disable first link in dropdown menu (js)

I have a menu in my CMS which is controlled programatically and I don't have access to the code, the only thing I can add is js/jquery. I would like to disable the first element from the menu, ie replace the current href with #. I'm new to jquery and need some help. Here's a menu sample.
<nav class="main-nav">
<div class="shell">
<ul>
<li class="taphover">
Education & Training<i class="ico-arrow"></i>
<div class="dd">
<ul>
<li>Book a Field Trip</li>
<li>Educator Development</li>
<li>Specialized Student Programs
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
I'd like to replace /education with #. Any ideas?

//select the first anchor where href="/education"
var anchor = $("a[href='/education']")[0];
//change the href of the anchor
anchor.attr('href') = "#";

how do I wrap my menu in to sub menu using jquery?

this is my site.
this is how I finally make it look like
I want to divide the the menu list items into two sub menu say menu left and right. And then wrap them in a div. This is make it easy for me to style them and this way they would stay responsive as well.
Now, I have been trying to achieve this by
jQuery( ".menu-item-580", ".menu-item-583",".menu-item-584",".menu-item-563").wrapAll("<div class='new' />").after(".menubar-brand");
I have trying this in browser console.
I also tried same above code by using appendTo() instead of after()
But, still no luck.

In your code you're basically doing this:
<ul>
<li>
<div class="new">
<li>
<li>
</div>
<li>
</ul>
which is not a valid markup.
The easiest way to goup <li>s would be to assign different additional css classes to different parts of the list:
<ul>
<li class="group1">
<li class="group1">
<li class="group2">
<li class="group2">
</ul>
Also, have a look at this: Is there a way to group `<li>` elements?

Superfish dropdown with Bootstrap?

How is it possible to combine the nav-pills of bootstrap and the sf-menu of superfish?
I simply tried to use them both.
<ul class="nav nav-pills" id="example">
<li class="sf-menu current"> menu item </li>
</ul>
.. but surely they conbtradicted each other in the css styles and the output wasn't useable. So now I am looking for an easy way, to combine both, without rewriting the css of either of them.
(I am beginner in front end programming)

Add active on parent li only

I know onlu basic jQuery. I want to add active class on parent li by jQuery.
Live site- http://www.arif-khan.net/other/active/page1.html
Go to there then go to page2 under Support menu(http://www.arif-khan.net/other/active/page2.html). You can see code add active class on all li also with parent li(Support).
I need to modify that code so parent li(Support) will get active class instead of parent+all child li.
Code-
<ol id="menu">
<li>Home
<li>OverView
<!-- sub menu -->
<ol>
<li>Technical Info</li>
<li>End Device Info</li>
</ol>
</li><!-- end sub menu -->
<li>Register To Service</li>
<li>Rates</li>
<li>Support
<!-- sub menu -->
<ol>
<li>Page2</li>
<li>Terms Of Service</li>
<li>Contact Us</li>
</ol>
</li><!-- end sub menu -->
<li>Skype</li>
</ol>
jQuery-
<script>
$(document).ready(function(){
$('ol#menu li a').each(function(index, element) {
var li = $(element).attr('href');
$(element).parent().removeClass("active");
var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
if(filename==li)
{
$(element).parents("li").addClass("active");
}
});
});
</script>

You must use
$(element).parent('li').parents('li').addClass("active");
instead of
$(element).parents("li").addClass("active");
Your anchor 'page2' is inside an 'li', so this is its direct parent. You must access the 'li's parent.

The parents() method selects all matching parent elements up the DOM tree. , You can use parent() For selecting the immediate parent element and closest() for selecting the first matching parent up the DOM tree.
So try
$(element).closest("ol").parent("li").addClass("active");
Instead of
$(element).parents("li").addClass("active");