1

I am trying to make parent dropdown link active when child is current page?

<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#section1">Section1</a></li>
        <li><a href="#section2">Section2</a></li>
        <li class="dropdown">Section3<b class="caret"></b>
            <ul class="dropdown-menu">
                <li><a href="#child1">Child1</a></li>
                <li><a href="#child2">Child2</a></li>
            </ul>
        </li>
    </ul>
</div>

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  outline: 2px solid #fff;
}

1 Answers1

1

After reading:

i think you can do this leveraging jQuery:

$('.dropdown-menu li a[href$="' + $(location).attr('pathname') + '"]').parents('li.dropdown').addClass('active');

Depending on structure of your links in your menu items you should probably adopt $(location).attr('pathname') to fit your needs.

Community
  • 1
  • 1
Bass Jobsen
  • 47,890
  • 16
  • 139
  • 218
  • Thank you! I think it doesn't work on a sinle page site. I am using fullpage.js jquery plugin. –  Nov 11 '14 at 16:44
  • fullpage.js use hashes as navigation link. In the above you can replace `$(location).attr('pathname')` with `url.substring(url.indexOf("#")+1);` – Bass Jobsen Nov 11 '14 at 19:12