{"action":"created","issue":{"url":"https://api.github.com/repos/creativetimofficial/paper-kit-2-pro/issues/6","repository_url":"https://api.github.com/repos/creativetimofficial/paper-kit-2-pro","labels_url":"https://api.github.com/repos/creativetimofficial/paper-kit-2-pro/issues/6/labels{/name}","comments_url":"https://api.github.com/repos/creativetimofficial/paper-kit-2-pro/issues/6/comments","events_url":"https://api.github.com/repos/creativetimofficial/paper-kit-2-pro/issues/6/events","html_url":"https://github.com/creativetimofficial/paper-kit-2-pro/issues/6","id":300239131,"number":6,"title":"Multilevel menu","user":{"login":"groovemen","id":21063398,"avatar_url":"https://avatars2.githubusercontent.com/u/21063398?v=4","gravatar_id":"","url":"https://api.github.com/users/groovemen","html_url":"https://github.com/groovemen","followers_url":"https://api.github.com/users/groovemen/followers","following_url":"https://api.github.com/users/groovemen/following{/other_user}","gists_url":"https://api.github.com/users/groovemen/gists{/gist_id}","starred_url":"https://api.github.com/users/groovemen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/groovemen/subscriptions","organizations_url":"https://api.github.com/users/groovemen/orgs","repos_url":"https://api.github.com/users/groovemen/repos","events_url":"https://api.github.com/users/groovemen/events{/privacy}","received_events_url":"https://api.github.com/users/groovemen/received_events","type":"User","site_admin":false},"labels":[{"id":663527361,"url":"https://api.github.com/repos/creativetimofficial/paper-kit-2-pro/labels/enhancement","name":"enhancement","color":"84b6eb","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-02-26T13:30:41Z","updated_at":"2018-03-20T14:20:46Z","closed_at":null,"author_association":"NONE","body":"If you want a multi-level dropdown menu, this is what you have to do: \r\n   - create a navbar with a sub-level dropdown menu: \r\n```\r\n<nav class=\"navbar navbar-expand-md navbar-light bg-light\">\r\n  <a class=\"navbar-brand\" href=\"#\">Navbar</a>\r\n  <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarNavDropdown\" aria-controls=\"navbarNavDropdown\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n    <span class=\"navbar-toggler-icon\"></span>\r\n  </button>\r\n  <div class=\"collapse navbar-collapse\" id=\"navbarNavDropdown\">\r\n    <ul class=\"navbar-nav\">\r\n      <li class=\"nav-item active\">\r\n          <a class=\"nav-link\" href=\"#\">Home <span class=\"sr-only\">(current)</span></a>\r\n      </li>\r\n      <li class=\"nav-item\">\r\n          <a class=\"nav-link\" href=\"#\">Features</a>\r\n      </li>\r\n      <li class=\"nav-item\">\r\n          <a class=\"nav-link\" href=\"#\">Pricing</a>\r\n      </li>\r\n      <li class=\"nav-item dropdown\">\r\n        <a class=\"nav-link dropdown-toggle\" href=\"https://bootstrapthemes.co\" id=\"navbarDropdownMenuLink\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n          Dropdown link\r\n        </a>\r\n        <ul class=\"dropdown-menu\" aria-labelledby=\"navbarDropdownMenuLink\">\r\n          <li><a class=\"dropdown-item\" href=\"#\">Action</a></li>\r\n          <li><a class=\"dropdown-item\" href=\"#\">Another action</a></li>\r\n          <li><a class=\"dropdown-item dropdown-toggle\" href=\"#\">Submenu</a>\r\n            <ul class=\"dropdown-menu\">\r\n                <li><a class=\"dropdown-item\" href=\"#\">Submenu action</a></li>\r\n                <li><a class=\"dropdown-item\" href=\"#\">Another submenu action</a></li>\r\n                <li><a class=\"dropdown-item dropdown-toggle\" href=\"#\">Subsubmenu</a>\r\n                    <ul class=\"dropdown-menu\">\r\n                        <li><a class=\"dropdown-item\" href=\"#\">Subsubmenu action aa</a></li>\r\n                        <li><a class=\"dropdown-item\" href=\"#\">Another subsubmenu action</a></li>\r\n                    </ul>\r\n                </li>\r\n                <li><a class=\"dropdown-item dropdown-toggle\" href=\"#\">Second subsubmenu</a>\r\n                    <ul class=\"dropdown-menu\">\r\n                        <li><a class=\"dropdown-item\" href=\"#\">Subsubmenu action bb</a></li>\r\n                        <li><a class=\"dropdown-item\" href=\"#\">Another subsubmenu action</a></li>\r\n                    </ul>\r\n                </li>\r\n            </ul>\r\n          </li>\r\n        </ul>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</nav>\r\n```\r\n   - go in `paper-kit.js` and insert this block of code:\r\n```\r\n$( document ).ready( function () {\r\n    $( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) {\r\n        var $el = $( this );\r\n        var $parent = $( this ).offsetParent( \".dropdown-menu\" );\r\n        if ( !$( this ).next().hasClass( 'show' ) ) {\r\n            $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( \"show\" );\r\n        }\r\n        var $subMenu = $( this ).next( \".dropdown-menu\" );\r\n        $subMenu.toggleClass( 'show' );\r\n        \r\n        $( this ).parent( \"li\" ).toggleClass( 'show' );\r\n\r\n        $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {\r\n            $( '.dropdown-menu .show' ).removeClass( \"show\" );\r\n        } );\r\n        \r\n         if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {\r\n            $el.next().css( { \"top\": $el[0].offsetTop, \"left\": $parent.outerWidth() - 4 } );\r\n        }\r\n\r\n        return false;\r\n    } );\r\n} );\r\n```\r\n\r\nBest, Stefan\r\n\r\n<img width=\"1438\" alt=\"screen shot 2018-02-26 at 15 22 07\" src=\"https://user-images.githubusercontent.com/21063398/36672987-f9b5b906-1b09-11e8-94f5-4d1b9bf88389.png\">\r\n"},"comment":{"url":"https://api.github.com/repos/creativetimofficial/paper-kit-2-pro/issues/comments/374615066","html_url":"https://github.com/creativetimofficial/paper-kit-2-pro/issues/6#issuecomment-374615066","issue_url":"https://api.github.com/repos/creativetimofficial/paper-kit-2-pro/issues/6","id":374615066,"user":{"login":"krishna-7","id":10972564,"avatar_url":"https://avatars3.githubusercontent.com/u/10972564?v=4","gravatar_id":"","url":"https://api.github.com/users/krishna-7","html_url":"https://github.com/krishna-7","followers_url":"https://api.github.com/users/krishna-7/followers","following_url":"https://api.github.com/users/krishna-7/following{/other_user}","gists_url":"https://api.github.com/users/krishna-7/gists{/gist_id}","starred_url":"https://api.github.com/users/krishna-7/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/krishna-7/subscriptions","organizations_url":"https://api.github.com/users/krishna-7/orgs","repos_url":"https://api.github.com/users/krishna-7/repos","events_url":"https://api.github.com/users/krishna-7/events{/privacy}","received_events_url":"https://api.github.com/users/krishna-7/received_events","type":"User","site_admin":false},"created_at":"2018-03-20T14:20:46Z","updated_at":"2018-03-20T14:20:46Z","author_association":"NONE","body":"Add the following code to _**paper-kit.css**_ along with the above code.\r\n\r\n```\r\n.nav-item.dropdown .dropdown-menu li.show .dropdown-menu.show{\r\n  opacity: 1;\r\n  visibility: visible;\r\n}\r\n```"}}
{"actor":{"display_login":"krishna-7"}}