{"action":"created","issue":{"url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/1275","repository_url":"https://api.github.com/repos/almasaeed2010/AdminLTE","labels_url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/1275/labels{/name}","comments_url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/1275/comments","events_url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/1275/events","html_url":"https://github.com/almasaeed2010/AdminLTE/issues/1275","id":194977612,"number":1275,"title":"Bootstrap drop down button inside nav dropdown-menu not working","user":{"login":"mojohub","id":23181949,"avatar_url":"https://avatars.githubusercontent.com/u/23181949?v=3","gravatar_id":"","url":"https://api.github.com/users/mojohub","html_url":"https://github.com/mojohub","followers_url":"https://api.github.com/users/mojohub/followers","following_url":"https://api.github.com/users/mojohub/following{/other_user}","gists_url":"https://api.github.com/users/mojohub/gists{/gist_id}","starred_url":"https://api.github.com/users/mojohub/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mojohub/subscriptions","organizations_url":"https://api.github.com/users/mojohub/orgs","repos_url":"https://api.github.com/users/mojohub/repos","events_url":"https://api.github.com/users/mojohub/events{/privacy}","received_events_url":"https://api.github.com/users/mojohub/received_events","type":"User","site_admin":false},"labels":[{"id":72086676,"url":"https://api.github.com/repos/almasaeed2010/AdminLTE/labels/Question","name":"Question","color":"cc317c","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-12-12T13:44:33Z","updated_at":"2017-01-09T01:58:57Z","closed_at":null,"body":"I want to add a bootstrap dropdown button to each list item in the dropdown messages-menu however when I click on the dropdown button the whole button and dropdown messages-menu disappears instead of giving me the button list options.\r\n\r\nIs it possible to add a dropdown button to these nav dropdown-menu items and if so how?"},"comment":{"url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/comments/271199297","html_url":"https://github.com/almasaeed2010/AdminLTE/issues/1275#issuecomment-271199297","issue_url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/1275","id":271199297,"user":{"login":"almasaeed2010","id":1512664,"avatar_url":"https://avatars.githubusercontent.com/u/1512664?v=3","gravatar_id":"","url":"https://api.github.com/users/almasaeed2010","html_url":"https://github.com/almasaeed2010","followers_url":"https://api.github.com/users/almasaeed2010/followers","following_url":"https://api.github.com/users/almasaeed2010/following{/other_user}","gists_url":"https://api.github.com/users/almasaeed2010/gists{/gist_id}","starred_url":"https://api.github.com/users/almasaeed2010/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/almasaeed2010/subscriptions","organizations_url":"https://api.github.com/users/almasaeed2010/orgs","repos_url":"https://api.github.com/users/almasaeed2010/repos","events_url":"https://api.github.com/users/almasaeed2010/events{/privacy}","received_events_url":"https://api.github.com/users/almasaeed2010/received_events","type":"User","site_admin":false},"created_at":"2017-01-09T01:58:57Z","updated_at":"2017-01-09T01:58:57Z","body":"AdminLTE utilizes Bootstrap dropdown to create its custom menus. The dropdown should work normally as seen bellow:\r\n<img width=\"670\" alt=\"screen shot 2017-01-08 at 8 56 29 pm\" src=\"https://cloud.githubusercontent.com/assets/1512664/21755631/f573531e-d5e4-11e6-8cf2-69c366c3704d.png\">\r\n\r\nMake sure you are adding your menu directly under ```nav navbar-nav```. Added within a dropdown like the example you are showing simply wouldn't work. Here is the full code for main-header navbar including a custom dropdown menu:\r\n\r\n```html\r\n<!-- Main Header -->\r\n  <header class=\"main-header\">\r\n\r\n    <!-- Logo -->\r\n    <a href=\"index2.html\" class=\"logo\">\r\n      <!-- mini logo for sidebar mini 50x50 pixels -->\r\n      <span class=\"logo-mini\"><b>A</b>LT</span>\r\n      <!-- logo for regular state and mobile devices -->\r\n      <span class=\"logo-lg\"><b>Admin</b>LTE</span>\r\n    </a>\r\n\r\n    <!-- Header Navbar -->\r\n    <nav class=\"navbar navbar-static-top\" role=\"navigation\">\r\n      <!-- Sidebar toggle button-->\r\n      <a href=\"#\" class=\"sidebar-toggle\" data-toggle=\"offcanvas\" role=\"button\">\r\n        <span class=\"sr-only\">Toggle navigation</span>\r\n      </a>\r\n      <!-- Navbar Right Menu -->\r\n      <div class=\"navbar-custom-menu\">\r\n        <ul class=\"nav navbar-nav\">\r\n          <li class=\"dropdown\">\r\n            <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">Dropdown <span class=\"caret\"></span></a>\r\n            <ul class=\"dropdown-menu\">\r\n              <li><a href=\"#\">Action</a></li>\r\n              <li><a href=\"#\">Another action</a></li>\r\n              <li><a href=\"#\">Something else here</a></li>\r\n              <li role=\"separator\" class=\"divider\"></li>\r\n              <li><a href=\"#\">Separated link</a></li>\r\n              <li role=\"separator\" class=\"divider\"></li>\r\n              <li><a href=\"#\">One more separated link</a></li>\r\n            </ul>\r\n          </li>\r\n          <!-- Messages: style can be found in dropdown.less-->\r\n          <li class=\"dropdown messages-menu\">\r\n            <!-- Menu toggle button -->\r\n            <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">\r\n              <i class=\"fa fa-envelope-o\"></i>\r\n              <span class=\"label label-success\">4</span>\r\n            </a>\r\n            <ul class=\"dropdown-menu\">\r\n              <li class=\"header\">You have 4 messages</li>\r\n              <li>\r\n                <!-- inner menu: contains the messages -->\r\n                <ul class=\"menu\">\r\n                  <li><!-- start message -->\r\n                    <a href=\"#\">\r\n                      <div class=\"pull-left\">\r\n                        <!-- User Image -->\r\n                        <img src=\"dist/img/user2-160x160.jpg\" class=\"img-circle\" alt=\"User Image\">\r\n                      </div>\r\n                      <!-- Message title and timestamp -->\r\n                      <h4>\r\n                        Support Team\r\n                        <small><i class=\"fa fa-clock-o\"></i> 5 mins</small>\r\n                      </h4>\r\n                      <!-- The message -->\r\n                      <p>Why not buy a new awesome theme?</p>\r\n                    </a>\r\n                  </li>\r\n                  <!-- end message -->\r\n                </ul>\r\n                <!-- /.menu -->\r\n              </li>\r\n              <li class=\"footer\"><a href=\"#\">See All Messages</a></li>\r\n            </ul>\r\n          </li>\r\n          <!-- /.messages-menu -->\r\n\r\n          <!-- Notifications Menu -->\r\n          <li class=\"dropdown notifications-menu\">\r\n            <!-- Menu toggle button -->\r\n            <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">\r\n              <i class=\"fa fa-bell-o\"></i>\r\n              <span class=\"label label-warning\">10</span>\r\n            </a>\r\n            <ul class=\"dropdown-menu\">\r\n              <li class=\"header\">You have 10 notifications</li>\r\n              <li>\r\n                <!-- Inner Menu: contains the notifications -->\r\n                <ul class=\"menu\">\r\n                  <li><!-- start notification -->\r\n                    <a href=\"#\">\r\n                      <i class=\"fa fa-users text-aqua\"></i> 5 new members joined today\r\n                    </a>\r\n                  </li>\r\n                  <!-- end notification -->\r\n                </ul>\r\n              </li>\r\n              <li class=\"footer\"><a href=\"#\">View all</a></li>\r\n            </ul>\r\n          </li>\r\n          <!-- Tasks Menu -->\r\n          <li class=\"dropdown tasks-menu\">\r\n            <!-- Menu Toggle Button -->\r\n            <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">\r\n              <i class=\"fa fa-flag-o\"></i>\r\n              <span class=\"label label-danger\">9</span>\r\n            </a>\r\n            <ul class=\"dropdown-menu\">\r\n              <li class=\"header\">You have 9 tasks</li>\r\n              <li>\r\n                <!-- Inner menu: contains the tasks -->\r\n                <ul class=\"menu\">\r\n                  <li><!-- Task item -->\r\n                    <a href=\"#\">\r\n                      <!-- Task title and progress text -->\r\n                      <h3>\r\n                        Design some buttons\r\n                        <small class=\"pull-right\">20%</small>\r\n                      </h3>\r\n                      <!-- The progress bar -->\r\n                      <div class=\"progress xs\">\r\n                        <!-- Change the css width attribute to simulate progress -->\r\n                        <div class=\"progress-bar progress-bar-aqua\" style=\"width: 20%\" role=\"progressbar\" aria-valuenow=\"20\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n                          <span class=\"sr-only\">20% Complete</span>\r\n                        </div>\r\n                      </div>\r\n                    </a>\r\n                  </li>\r\n                  <!-- end task item -->\r\n                </ul>\r\n              </li>\r\n              <li class=\"footer\">\r\n                <a href=\"#\">View all tasks</a>\r\n              </li>\r\n            </ul>\r\n          </li>\r\n          <!-- User Account Menu -->\r\n          <li class=\"dropdown user user-menu\">\r\n            <!-- Menu Toggle Button -->\r\n            <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">\r\n              <!-- The user image in the navbar-->\r\n              <img src=\"dist/img/user2-160x160.jpg\" class=\"user-image\" alt=\"User Image\">\r\n              <!-- hidden-xs hides the username on small devices so only the image appears. -->\r\n              <span class=\"hidden-xs\">Alexander Pierce</span>\r\n            </a>\r\n            <ul class=\"dropdown-menu\">\r\n              <!-- The user image in the menu -->\r\n              <li class=\"user-header\">\r\n                <img src=\"dist/img/user2-160x160.jpg\" class=\"img-circle\" alt=\"User Image\">\r\n\r\n                <p>\r\n                  Alexander Pierce - Web Developer\r\n                  <small>Member since Nov. 2012</small>\r\n                </p>\r\n              </li>\r\n              <!-- Menu Body -->\r\n              <li class=\"user-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-xs-4 text-center\">\r\n                    <a href=\"#\">Followers</a>\r\n                  </div>\r\n                  <div class=\"col-xs-4 text-center\">\r\n                    <a href=\"#\">Sales</a>\r\n                  </div>\r\n                  <div class=\"col-xs-4 text-center\">\r\n                    <a href=\"#\">Friends</a>\r\n                  </div>\r\n                </div>\r\n                <!-- /.row -->\r\n              </li>\r\n              <!-- Menu Footer-->\r\n              <li class=\"user-footer\">\r\n                <div class=\"pull-left\">\r\n                  <a href=\"#\" class=\"btn btn-default btn-flat\">Profile</a>\r\n                </div>\r\n                <div class=\"pull-right\">\r\n                  <a href=\"#\" class=\"btn btn-default btn-flat\">Sign out</a>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </li>\r\n          <!-- Control Sidebar Toggle Button -->\r\n          <li>\r\n            <a href=\"#\" data-toggle=\"control-sidebar\"><i class=\"fa fa-gears\"></i></a>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n    </nav>\r\n  </header>\r\n```"}}
{"actor":{"display_login":"almasaeed2010"}}