Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Show current submenu in mobile view (itemActivate)

Home Forums Latest release 1.1.x + Bootstrap 4 addon Show current submenu in mobile view (itemActivate)

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #3754

    Hi there!

    I try to open the active submenu (only) in mobile view on load.

    I’ve tried it with data-sm-options and itemActivate, but with no success so far…

    <ul class="nav navbar-nav mr-auto" data-sm-options="{ itemActivate: $('a#nav-link2') }">
      <li class="nav-item"><a href="link1.php">Link 1</a></li>
      <li class="nav-item dropdown"><a href="link2.php">Link 2</a>
        <ul class="dropdown-menu">
          <li><a href="link2a.php">Link2a</a></li>
          <li><a href="link2b.php">Link2b</a></li>
          <li><a href="link2c.php">Link2c</a></li>
      <li class="nav-item dropdown"><a href="link3.php">Link 3</a>
        <ul class="dropdown-menu">
          <li><a href="link3a.php">Link3a</a></li>
          <li><a href="link3b.php">Link3b</a></li>

    In this example, the submenu of Link 2 should be visible on load, because Link2b is active.

    Many thanks in advance for any help!


    Hi, sorry for the delay! You’d need to use this option data-sm-options="{ markCurrentItem: true }" – this will make sure the script adds the “current” class automatically to the <a> element linking to the current URL.

    And then include some additional JS at the end of you pages – something like this:

    // SmartMenus jQuery + Bootstrap 4 - expand active sub menu on mobile toggle button click
    $('.navbar-toggler').click(function() {
      var $nav = $('.navbar-nav');
      if (!$(this).is('[aria-expanded="true"]')) {
        // use the timeout to make sure it works after the navbar is expanded by the BS JS
        setTimeout(function() {
          $nav.smartmenus('itemActivate', $nav.find('a.current').eq(-1));
        }, 1);
      } else {

    (You may need to change the selectors if you have multiple .navbar-toggler/.navbar-nav elements on your pages.)


    Hi Vasil
    Thank you so much for your answer. It works perfectly!!! 😀
    Many thanks for your help!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘1.1.x + Bootstrap 4 addon’ is closed to new topics and replies.