Bootstrap multi level menu issues on mobile
up vote
0
down vote
favorite
My problem is, that when i am looking at the site on mobile, i cant see the submenus.
For example:
I click down the "Alaplap" menu, then it displays the submenu, "Intel alaplap" and "amd alaplap". But the "Intel alaplap" also has a submenu, and i cant see that on mobile.
<ul class="nav nav-justified">
<li><a href="https://projektar.hu/kategoria/4/alaplap" class="dropdown-toggle" data-toggle="dropdown">Alaplap<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/74/alaplap/intel-alaplap" class="dropdown-toggle" data-toggle="dropdown">Intel alaplap</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/83/alaplap/intel-alaplap/asus-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus alaplap</a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/86/alaplap/intel-alaplap/asus-alaplap/asus-z370-alaplap">Asus Z370 alaplap</a></li>
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/87/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus Z390 Express alaplap</a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/88/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/aaa">aaaaa</a></li>
<li><a href="https://projektar.hu/kategoria/89/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/bbb">bbbb</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/84/alaplap/intel-alaplap/msi-alaplap">MSI alaplap</a></li>
<li><a href="https://projektar.hu/kategoria/85/alaplap/intel-alaplap/gigabyte-alaplap">Gigabyte alaplap</a></li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/75/alaplap/amd-alaplap">AMD alaplap</a></li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/73/ssd-meghajto">SSD meghajtó</a></li>
<li><a href="https://projektar.hu/kategoria/76/videokartya">Videókártya</a></li>
<li><a href="https://projektar.hu/kategoria/77/memoria">Memória</a></li>
<li><a href="https://projektar.hu/kategoria/78/tapegyseg">Tápegység</a></li>
<li><a href="https://projektar.hu/kategoria/79/merevlemez">Merevlemez</a></li>
<li><a href="https://projektar.hu/kategoria/80/monitor">Monitor</a></li>
<li><a href="https://projektar.hu/kategoria/81/telefontok" class="dropdown-toggle" data-toggle="dropdown">Telefontok<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/82/telefontok/samsung-telefontok">Samsung telefontok</a></li>
</ul>
</li>
</ul>
You can take a look at my demo site at here: My demo site
html css twitter-bootstrap drop-down-menu dropdown
New contributor
add a comment |
up vote
0
down vote
favorite
My problem is, that when i am looking at the site on mobile, i cant see the submenus.
For example:
I click down the "Alaplap" menu, then it displays the submenu, "Intel alaplap" and "amd alaplap". But the "Intel alaplap" also has a submenu, and i cant see that on mobile.
<ul class="nav nav-justified">
<li><a href="https://projektar.hu/kategoria/4/alaplap" class="dropdown-toggle" data-toggle="dropdown">Alaplap<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/74/alaplap/intel-alaplap" class="dropdown-toggle" data-toggle="dropdown">Intel alaplap</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/83/alaplap/intel-alaplap/asus-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus alaplap</a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/86/alaplap/intel-alaplap/asus-alaplap/asus-z370-alaplap">Asus Z370 alaplap</a></li>
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/87/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus Z390 Express alaplap</a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/88/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/aaa">aaaaa</a></li>
<li><a href="https://projektar.hu/kategoria/89/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/bbb">bbbb</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/84/alaplap/intel-alaplap/msi-alaplap">MSI alaplap</a></li>
<li><a href="https://projektar.hu/kategoria/85/alaplap/intel-alaplap/gigabyte-alaplap">Gigabyte alaplap</a></li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/75/alaplap/amd-alaplap">AMD alaplap</a></li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/73/ssd-meghajto">SSD meghajtó</a></li>
<li><a href="https://projektar.hu/kategoria/76/videokartya">Videókártya</a></li>
<li><a href="https://projektar.hu/kategoria/77/memoria">Memória</a></li>
<li><a href="https://projektar.hu/kategoria/78/tapegyseg">Tápegység</a></li>
<li><a href="https://projektar.hu/kategoria/79/merevlemez">Merevlemez</a></li>
<li><a href="https://projektar.hu/kategoria/80/monitor">Monitor</a></li>
<li><a href="https://projektar.hu/kategoria/81/telefontok" class="dropdown-toggle" data-toggle="dropdown">Telefontok<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/82/telefontok/samsung-telefontok">Samsung telefontok</a></li>
</ul>
</li>
</ul>
You can take a look at my demo site at here: My demo site
html css twitter-bootstrap drop-down-menu dropdown
New contributor
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
My problem is, that when i am looking at the site on mobile, i cant see the submenus.
For example:
I click down the "Alaplap" menu, then it displays the submenu, "Intel alaplap" and "amd alaplap". But the "Intel alaplap" also has a submenu, and i cant see that on mobile.
<ul class="nav nav-justified">
<li><a href="https://projektar.hu/kategoria/4/alaplap" class="dropdown-toggle" data-toggle="dropdown">Alaplap<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/74/alaplap/intel-alaplap" class="dropdown-toggle" data-toggle="dropdown">Intel alaplap</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/83/alaplap/intel-alaplap/asus-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus alaplap</a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/86/alaplap/intel-alaplap/asus-alaplap/asus-z370-alaplap">Asus Z370 alaplap</a></li>
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/87/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus Z390 Express alaplap</a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/88/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/aaa">aaaaa</a></li>
<li><a href="https://projektar.hu/kategoria/89/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/bbb">bbbb</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/84/alaplap/intel-alaplap/msi-alaplap">MSI alaplap</a></li>
<li><a href="https://projektar.hu/kategoria/85/alaplap/intel-alaplap/gigabyte-alaplap">Gigabyte alaplap</a></li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/75/alaplap/amd-alaplap">AMD alaplap</a></li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/73/ssd-meghajto">SSD meghajtó</a></li>
<li><a href="https://projektar.hu/kategoria/76/videokartya">Videókártya</a></li>
<li><a href="https://projektar.hu/kategoria/77/memoria">Memória</a></li>
<li><a href="https://projektar.hu/kategoria/78/tapegyseg">Tápegység</a></li>
<li><a href="https://projektar.hu/kategoria/79/merevlemez">Merevlemez</a></li>
<li><a href="https://projektar.hu/kategoria/80/monitor">Monitor</a></li>
<li><a href="https://projektar.hu/kategoria/81/telefontok" class="dropdown-toggle" data-toggle="dropdown">Telefontok<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/82/telefontok/samsung-telefontok">Samsung telefontok</a></li>
</ul>
</li>
</ul>
You can take a look at my demo site at here: My demo site
html css twitter-bootstrap drop-down-menu dropdown
New contributor
My problem is, that when i am looking at the site on mobile, i cant see the submenus.
For example:
I click down the "Alaplap" menu, then it displays the submenu, "Intel alaplap" and "amd alaplap". But the "Intel alaplap" also has a submenu, and i cant see that on mobile.
<ul class="nav nav-justified">
<li><a href="https://projektar.hu/kategoria/4/alaplap" class="dropdown-toggle" data-toggle="dropdown">Alaplap<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/74/alaplap/intel-alaplap" class="dropdown-toggle" data-toggle="dropdown">Intel alaplap</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/83/alaplap/intel-alaplap/asus-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus alaplap</a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/86/alaplap/intel-alaplap/asus-alaplap/asus-z370-alaplap">Asus Z370 alaplap</a></li>
<li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/87/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus Z390 Express alaplap</a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/88/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/aaa">aaaaa</a></li>
<li><a href="https://projektar.hu/kategoria/89/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/bbb">bbbb</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/84/alaplap/intel-alaplap/msi-alaplap">MSI alaplap</a></li>
<li><a href="https://projektar.hu/kategoria/85/alaplap/intel-alaplap/gigabyte-alaplap">Gigabyte alaplap</a></li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/75/alaplap/amd-alaplap">AMD alaplap</a></li>
</ul>
</li>
<li><a href="https://projektar.hu/kategoria/73/ssd-meghajto">SSD meghajtó</a></li>
<li><a href="https://projektar.hu/kategoria/76/videokartya">Videókártya</a></li>
<li><a href="https://projektar.hu/kategoria/77/memoria">Memória</a></li>
<li><a href="https://projektar.hu/kategoria/78/tapegyseg">Tápegység</a></li>
<li><a href="https://projektar.hu/kategoria/79/merevlemez">Merevlemez</a></li>
<li><a href="https://projektar.hu/kategoria/80/monitor">Monitor</a></li>
<li><a href="https://projektar.hu/kategoria/81/telefontok" class="dropdown-toggle" data-toggle="dropdown">Telefontok<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://projektar.hu/kategoria/82/telefontok/samsung-telefontok">Samsung telefontok</a></li>
</ul>
</li>
</ul>
You can take a look at my demo site at here: My demo site
html css twitter-bootstrap drop-down-menu dropdown
html css twitter-bootstrap drop-down-menu dropdown
New contributor
New contributor
edited Nov 10 at 14:05
jww
51.8k37211477
51.8k37211477
New contributor
asked Nov 10 at 13:13
max777
31
31
New contributor
New contributor
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
This is happening because your site is still showing them in horizontal orientation when switching to responsive view which is always going to lead to a bad UX on mobile. This is how I would approach it myself. Feel fre to thank Ricard Torres if this was helpful.
.dropdown-submenu
position: relative;
.dropdown-submenu > .dropdown-menu
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
.dropdown-submenu:hover > .dropdown-menu
display: block;
.dropdown-submenu:hover > a:after
border-left-color: #fff;
.dropdown-submenu.pull-left
float: none;
.dropdown-submenu.pull-left > .dropdown-menu
left: -100%;
margin-left: 10px;
and here is the actual html to power your menu...feel free to change the css accordingly.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Link 1</a></li>
<li><a href="#">Lik 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li> <!-- .dropdown -->
</ul> <!-- .nav .navbar-nav -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Codepen solution to see it working
And how many level can i add to this menu? Or only just 2?
– max777
Nov 10 at 14:25
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
This is happening because your site is still showing them in horizontal orientation when switching to responsive view which is always going to lead to a bad UX on mobile. This is how I would approach it myself. Feel fre to thank Ricard Torres if this was helpful.
.dropdown-submenu
position: relative;
.dropdown-submenu > .dropdown-menu
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
.dropdown-submenu:hover > .dropdown-menu
display: block;
.dropdown-submenu:hover > a:after
border-left-color: #fff;
.dropdown-submenu.pull-left
float: none;
.dropdown-submenu.pull-left > .dropdown-menu
left: -100%;
margin-left: 10px;
and here is the actual html to power your menu...feel free to change the css accordingly.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Link 1</a></li>
<li><a href="#">Lik 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li> <!-- .dropdown -->
</ul> <!-- .nav .navbar-nav -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Codepen solution to see it working
And how many level can i add to this menu? Or only just 2?
– max777
Nov 10 at 14:25
add a comment |
up vote
0
down vote
This is happening because your site is still showing them in horizontal orientation when switching to responsive view which is always going to lead to a bad UX on mobile. This is how I would approach it myself. Feel fre to thank Ricard Torres if this was helpful.
.dropdown-submenu
position: relative;
.dropdown-submenu > .dropdown-menu
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
.dropdown-submenu:hover > .dropdown-menu
display: block;
.dropdown-submenu:hover > a:after
border-left-color: #fff;
.dropdown-submenu.pull-left
float: none;
.dropdown-submenu.pull-left > .dropdown-menu
left: -100%;
margin-left: 10px;
and here is the actual html to power your menu...feel free to change the css accordingly.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Link 1</a></li>
<li><a href="#">Lik 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li> <!-- .dropdown -->
</ul> <!-- .nav .navbar-nav -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Codepen solution to see it working
And how many level can i add to this menu? Or only just 2?
– max777
Nov 10 at 14:25
add a comment |
up vote
0
down vote
up vote
0
down vote
This is happening because your site is still showing them in horizontal orientation when switching to responsive view which is always going to lead to a bad UX on mobile. This is how I would approach it myself. Feel fre to thank Ricard Torres if this was helpful.
.dropdown-submenu
position: relative;
.dropdown-submenu > .dropdown-menu
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
.dropdown-submenu:hover > .dropdown-menu
display: block;
.dropdown-submenu:hover > a:after
border-left-color: #fff;
.dropdown-submenu.pull-left
float: none;
.dropdown-submenu.pull-left > .dropdown-menu
left: -100%;
margin-left: 10px;
and here is the actual html to power your menu...feel free to change the css accordingly.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Link 1</a></li>
<li><a href="#">Lik 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li> <!-- .dropdown -->
</ul> <!-- .nav .navbar-nav -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Codepen solution to see it working
This is happening because your site is still showing them in horizontal orientation when switching to responsive view which is always going to lead to a bad UX on mobile. This is how I would approach it myself. Feel fre to thank Ricard Torres if this was helpful.
.dropdown-submenu
position: relative;
.dropdown-submenu > .dropdown-menu
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
.dropdown-submenu:hover > .dropdown-menu
display: block;
.dropdown-submenu:hover > a:after
border-left-color: #fff;
.dropdown-submenu.pull-left
float: none;
.dropdown-submenu.pull-left > .dropdown-menu
left: -100%;
margin-left: 10px;
and here is the actual html to power your menu...feel free to change the css accordingly.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Link 1</a></li>
<li><a href="#">Lik 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li> <!-- .dropdown -->
</ul> <!-- .nav .navbar-nav -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Codepen solution to see it working
answered Nov 10 at 13:30
Frankenmint
7341622
7341622
And how many level can i add to this menu? Or only just 2?
– max777
Nov 10 at 14:25
add a comment |
And how many level can i add to this menu? Or only just 2?
– max777
Nov 10 at 14:25
And how many level can i add to this menu? Or only just 2?
– max777
Nov 10 at 14:25
And how many level can i add to this menu? Or only just 2?
– max777
Nov 10 at 14:25
add a comment |
max777 is a new contributor. Be nice, and check out our Code of Conduct.
max777 is a new contributor. Be nice, and check out our Code of Conduct.
max777 is a new contributor. Be nice, and check out our Code of Conduct.
max777 is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239289%2fbootstrap-multi-level-menu-issues-on-mobile%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown