The main issue is that menu items are overflowing off the page to the bottom. I have attempted to solve the issue and I have failed to do so and I really have burnt myself out trying to fix it. This menu is in an iframe but regardless the problem still occurs even if it is on a regular page. A picture of the problem is below:
Here is the code
<div class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="roleMenu" class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menuUL" class="nav navbar-nav">
<li{{ (Request::is('admin') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-home"></span> Home</li>
<li{{ (Request::is('admin/blogs*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-list-alt"></span> Pages</li>
<li{{ (Request::is('admin/comments*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-bullhorn"></span> Comments</li>
<li{{ (Request::is('admin/menuBuilder*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-bullhorn"></span> Menu Builder</li>
<li class="dropdown{{ (Request::is('admin/users*|admin/roles*') ? ' active' : '') }}">
<a class="dropdown-toggle" data-toggle="dropdown" href="{{{ URL::to('admin/users') }}}">
<span class="glyphicon glyphicon-user"></span> Users <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li{{ (Request::is('admin/users*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-user"></span> Users</li>
<li{{ (Request::is('admin/roles*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-user"></span> Roles</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>View Homepage</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-user"></span> {{{ Auth::user()->username }}} <span class="caret"></span>
</a>
<ul class="dropdown-menu " style="overflow:scroll"; >
<li><span class="glyphicon glyphicon-wrench"></span> A</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> B</li>
<li><span class="glyphicon glyphicon-wrench"></span> C</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> d</li>
<li><span class="glyphicon glyphicon-wrench"></span> e</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> f</li>
<li><span class="glyphicon glyphicon-wrench"></span> g</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> h</li>
<li><span class="glyphicon glyphicon-wrench"></span> i</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> j</li>
<li><span class="glyphicon glyphicon-wrench"></span> k</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> l</li>
<li><span class="glyphicon glyphicon-wrench"></span> m</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> n</li>
<li><span class="glyphicon glyphicon-wrench"></span> o</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> p</li>
<li><span class="glyphicon glyphicon-wrench"></span> q</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> r</li>
<li><span class="glyphicon glyphicon-wrench"></span> s</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> t</li>
<li><span class="glyphicon glyphicon-wrench"></span> u</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> v</li>
<li><span class="glyphicon glyphicon-wrench"></span> w</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> x</li>
<li><span class="glyphicon glyphicon-wrench"></span> y</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> z</li>
<li class="divider"></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Multiple approaches taken:
1) Setting overflow:scroll to dropdown class:
Result: It works but not ideal at all.
2) Setting overflow:scroll to dropdown-menu class:
Result: A scroll bar appears but doesn't do anything(aka scrolling doesn't work)
3) Attempted to do solution here. If I change up the html or css to make it compatible it ruins other stuff already made and looks terrible. If anyone could help me with this I would greatly appreciate it.
More information to help:
My code is based on a laravel starter kit: https://github.com/andrewelkins/Laravel-4-Bootstrap-Starter-Site
I been at this for a few hours doing research and nothing for this seems like an easy solution, mainly because of the way my menu bar is structured. Anyone willing to provide help, css, javascript, or anything else that can help me would be greatly appreciated.
Maybe you should set height to dropdown-menu class , otherwise 'overflow:auto' won't work
Related
In bootstrap, with the below code i am able to expand and collapse the 2 menus. But when i expands a menu and click on the sub menu, then the sub menus are not staying collapse..
When i changed this line from class="collapse list-unstyled " to class="collapse list-unstyled show" the menus are collapsed and not shrinking when i click on the next main menu...
<?php include('header.php'); ?>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<ul class="list-unstyled components top_admin">
</ul>
<ul class="list-unstyled components">
<li>
<a href="dashboard.php" data-toggle="collapse" aria-expanded="false" >
<i class="fa fa-tachometer" aria-hidden="true"></i>
<span>DASHBOARD </span>
</a>
</li>
<li>
<a href="#my_note1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fa fa-hand-o-up" aria-hidden="false"></i>
<span>My Notes1</span>
</a>
<ul class="collapse list-unstyled " id="my_note1">
<li>
<span class="small_menu">CN</span>
<a class="la_cls" href="page1.php">Create Note</a>
</li>
</ul>
</li>
<li>
<a href="#my_note2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fa fa-hand-o-up" aria-hidden="false"></i>
<span>My Notes2</span>
</a>
<ul class="collapse list-unstyled " id="my_note2">
<li>
<span class="small_menu">CN</span>
<a class="la_cls" href="page1.php">Create Note</a>
</li>
<li>
<span class="small_menu">SN</span>
<a class="la_cls" href="#">Search Notes</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
I need after clicking the sub menu the sub menus should me stayed collapsed util i click on the another main menu. Anyone please help me, what should i do to solve this problem. Thanks in advance..
<header role="banner" id="top" class="navbar navbar-static-top">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="animbrand">M-Panel</div>
</div>
<div class="collapse navbar-collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class=""><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-list-alt"></span> Offers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> All Offer Details</li>
<li class=""><span class="glyphicon glyphicon-pencil"></span> Create Offer ID</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-book"></span> Reports <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Click Report</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Live Report</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> This Month Revenue</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Last Month Revenue</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> News Reports</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-user"></span> Accounts <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> View Accounts</li>
<li class=""><span class="glyphicon glyphicon-pencil"></span> Add Account</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" >
<span></span>
<small>Welcome,</small> User <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-off"></i> Logout</li>
</ul>
</li>
</ul>
</div>
</div>
I am trying to align the selections in the navbar with the edges of the jumbotron, so that the rapidcodes logo aligns with the edge of the grey box in 'Newest Additions' and the 'login' button aligns with the right edge of the grey box.
See screenshot of current page:
Code:
td {
text-align: left;
vertical-align: central;
padding: 4px;
}
.products {
display: inline-block;
margin: 15px;
}
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
Try packing your code inside the external div with the class of 'container'.
<div class="container"><!--Pack your code inside the container-->
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div><!--end container-->
Your content probably has a container .container. Also wrap your navbar with this.
I was successfully using ui-bootstrap's dropdown menu with version 0.11.0 as follows:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-cogs"></i> Hi {{"{{user.fName}}"}} !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
But, I needed to use datepicker's month mode which required me to upgrade to 0.13.3. Here's my other question explaining that.
Here's a common plunker.
But, now my dropdown menu has stopped working. On clicking it, no dropdown shows but also there is no error. Any idea how I should tackle this?
To fix this, you have to use the directive dropdown, not only the class.
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>
<i class="fa fa-cogs"></i> Hi !
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
Simply add dropdown and dropdown-toggle on your HTML tag will do the trick.
Working Plunker
As suggested by Pierre, I had to add attributes 'dropdown' and 'dropdown-toggle' rather than classes in version 0.13.3 as compared to 0.11.0. Changing the markup from:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-cogs"></i> Hi !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
to
<ul class="nav navbar-nav navbar-right">
<li dropdown>
</i> Hi {{"{{user.fName}}"}} !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
did the trick.
So I've looked though some of the questions already asked about this issue and have not been able to find a solution that works for me.
I am using Bootstrap (v 3.3.5) to create a navbar menu at the top of my site. I am also using AngularJS (v 1.4.4) and Angular-UI-Bootstrap (v 0.13.3). When the menu collapses and is shown you have to toggle the menu button in order for it to close. clicking the menu links or outside of the menu has no effect.
So I tried several solutions talked about on Stackoverflow but none of them have worked for me. After several hours of pulling my hair out I came up with an option for closing the menu when the route changes (AngularJS $route) but my code does not seem to be doing the trick. I would love some advice.
(function (Directives, undefined)
{
app.Modules.app.directive("collaspeListener", [ function () /* AngularJS Directive */
{
return {
restrict: 'A',
link: function(scope, element, attr) {
$('#navcollaspe').on(shown.bs.collapse, function () { /*Bootstrap collapse JS */
console.log("shown");
$rootScope.$on('$routeChangeSuccess', function() { /*AngularJS $route */
$('#navcollaspe').collapse('hide') /* Bootstrap collapse JS */
})
})
}
}
}]);
}(app.Directives = app.Directives || {} ));
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container" collapse-listener="">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed visible-xs-block" data-toggle="collapse" data-target="#navcollapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand"><img src="assets/images/logos/logo.png" class="img-responsive" alt="Logo"></img></div>
<div class="navbar-text navbar-left hidden-xs">Main Title</div>
<div class="navbar-text navbar-left visible-xs-block ">Short Title</div>
<div class="outside-nav">
<ul class="nav navbar-nav navbar-right visible-sm-block dropdown-menu-left">
<li ><span class="glyphicon glyphicon-home" aria-hidden="true"></span></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>....</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Applications</li>
<li>...</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">Company</li>
<li><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About US</li>
<li><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Company Blogs</li>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> Contact Us</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-header">My Account</li>
<li><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> Profile</li>
<li><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> Messages <span class="badge">{{ user.newMessagesCount }}</span></li>
<li><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Settings</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Sign Out</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span></li>
</ul>
</div><!-- End outside-nav -->
</div><!-- End navbar-header -->
<div class="collapse navbar-collapse" id="navcollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> Systems<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>....</li>
<li>...</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> Applications<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>...</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> Company<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About US</li>
<li><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Company Blogs</li>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> Contact Us</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> My Account <span class="badge">{{ user.newMessagesCount }}</span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> Profile</li>
<li><span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> Messages <span class="badge">{{ user.newMessagesCount }}</span></li>
<li><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Settings</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-off" aria-hidden="true"></span> Sign Out</li>
</ul>
</li>
</ul>
</div><!-- End navbar-collapse -->
</div><!-- End Navbar Container -->
</nav><!-- End Top Navbar -->
So after looking over the code and doing some more research I was able to find a way to collapse the menu whenever a link within it was clicked.
I found a couple places where I miss spelled something, which after fixing got the code to execute the console.log('shown') but nothing else. So I ended up finding a great tutorial on how to properly use AngularJS and Bootstrap together using Angular-UI. The tutorial is by Chris Sevilleja.
So after adjusting my code to follow Angular-UI recommendations it works as expected. I also injected $rootScope based on a recomadation from Hinrich in the comments above. I have included the new code in hopes that it saves someone else some time and frustration. :)
(function (Controllers, undefined)
{
app.Modules.app.controller("navController", ['$scope', function ($scope)
{
$scope.isCollapsed = true;
}]);
}(app.Controllers = app.Controllers || {} ));
(function (Directives, undefined)
{app.Modules.app.directive("collapseListener", ['$rootScope', function ($rootScope)
{
return {
restrict: 'A',
controller: 'navController',
link: function(scope, element, attr) {
$rootScope.$on('$routeChangeSuccess', function(event, current, previous, rejection) {
if (scope.isCollapsed == false) {
scope.isCollapsed = true;
}
})
}
}
}]);
}(app.Directives = app.Directives || {} ));
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container" collapse-listener="">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand"><img src="assets/images/logos/logo.png" class="img-responsive" alt="Logo"></img></div>
<div class="navbar-text navbar-left">Full Title</div>
</div><!-- End navbar-header -->
<div class="collapse navbar-collapse" collapse="isCollapsed">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</li>
<li dropdown=""><a dropdown-toggle=""><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> Systems<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>
</div><!-- End navbar-collapse -->
</div><!-- End Navbar Container -->
</nav><!-- End Top Navbar -->
I have a question on Bootstrap. I have this code:
<ul>
<li><span class="icon fa-home">Home</span></li>
<li><span class="icon fa-th">Photogallery</span></li>
<li><span class="icon fa-user">Chi sono</span></li>
<li><span class="icon fa-linkedin-square">Curriculum</span>
<ul>
<li>Formazione</li>
<li>Stage</li>
<li>Insegnante Hip Hop</li>
<li>Danzatore</li>
<li>Coreografie</li>
</ul></li>
<li><span class="icon fa-envelope">Contatti</span></li>
</ul>
I would that the central <ul> element was a sub menu of the #curriculum <li> element. In other words I would that the sub menu was shown only when the #curriculum element was expanded.
How can I do this?
In this moment the navigation menu is this:
<ul>
<li><span class="icon fa-home">Home</span></li>
<li><span class="icon fa-th">Photogallery</span></li>
<li><span class="icon fa-user">Chi sono</span></li>
<li><span class="icon fa-linkedin-square">Curriculum</span>
<ul>
<li>Formazione</li>
<li>Stage</li>
<li>Insegnante Hip Hop</li>
<li>Danzatore</li>
<li>Coreografie</li>
</ul></li>
<li><span class="icon fa-envelope">Contatti</span></li>
</ul>
You could put the list items you want in the sub menu inside a bootstrap dropdown like this:
Example http://www.bootply.com/IspYezDkvo
<li class="dropdown">
Curriculum <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Formazione</li>
<li>Stage</li>
<li>Insegnante Hip Hop</li>
<li>Danzatore</li>
<li>Coreografie</li>
</ul>
</li>