Why is this bootstrap dropdown not working properly? - html

I'm working with the DDR Menu of DotNetNuke. I'm using it on this page:
http://lumenis.bondtest.nl/Aesthetic
The menu on the bottom is the ddr menu.
For some reason, the dropdown menu is not getting between the li's, but on top of them.
I'm using this code:
<nav class="navbar navbar-default lumenisInnerMenu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<div class="collapse navbar-collapse lumenisListItems" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
[*>NODE]
</ul>
</div>
</div>
</nav>
[>NODE]
<li class="[?SELECTED]dir current[/?][?NODE]HasChildren dropdownmenu [/?]">
[?ENABLED]
<a [?!NODE] href="[=URL]" [/?] [?TARGET]target="[=TARGET]"[/?] class="[?NODE]dropdown-toggle[/?]" data-toggle="collapse" data-target="#[=ID]">
<span>[=TEXT]</span>
</a>
[?ELSE]
<a href="#" [?NODE] [/?]> [?NODE]
<span>[=TEXT]</span>[/?]
</a>
[/?]
[?NODE]
<ul class="dropdown-menu dropdown[=DEPTH]" id="[=ID]">
[*>NODE]
</ul>
[/?]
</li>
[/>]
Does anybody have any idea what I'm doing wrong?
Thanks in advance.

Related

I want to make dropdown menu show only in mobile view

I made a dropdown menu, but now I want this menu to only show in mobile view, and not in other views. I guess it's done using "visible-xs" or something like that, but I couldn't code it.
Here's my HTML,
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Food, LLC</a>
</div>
<div>
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapsable-nav" 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>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>Chicken</li>
<li>Beef</li>
<li>Sushi</li>
</ul>
</div>
</div>
</nav>

<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Food, LLC</a>
</div>
<div>
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapsable-nav" 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>
<div id="collapsable-nav" class="collapse navbar-collapse visible-xs">
<ul id="nav-list" class="nav navbar-nav navbar-right ">
<li>Chicken</li>
<li>Beef</li>
<li>Sushi</li>
</ul>
</div>
</div>
</nav>

How to open one 3 level menu at a time with bootstrap

I'm building a responsive navigation using the DDRMenu Module in DNN.
The menu I am working on has 3 levels.
You can see it on http://lumenis.bondtest.nl/test-inner-menu
The mobile version (resolution below 770px) is styled differently ofcourse.
It's not working on hover but on click.
Now I want to have only 1 third menu open at the time. Now you can open all the menu at the same time which makes a really long list.
See:
This is my code:
<nav class="navbar navbar-default lumenisInnerMenu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<div class="collapse navbar-collapse lumenisListItems" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
[*>NODE]
</ul>
</div>
</div>
</nav>
[>NODE]
<li class="[?SELECTED]dir current[/?][?NODE]HasChildren child[=DEPTH] dropdownmenu [/?]">
[?ENABLED]
<a [?!NODE] href="[=URL]" [/?] [?TARGET]target="[=TARGET]"[/?] class="[?NODE]dropdown-toggle[/?]" data-toggle="collapse" data-target="#[=ID]">
<div class="textsubitem">
<span>[=TEXT]</span>
</div>
</a>
[?ELSE]
<a href="#" [?NODE] [/?]> [?NODE]
<span>[=TEXT]</span>[/?]
</a>
[/?]
[?NODE]
<ul class="dropdown-menu dropdown[=DEPTH]" id="[=ID]">
[*>NODE]
</ul>
[/?]
</li>
[/>]
How to solve?
Thanks in advance.

Bootstrap - The links do not appear on the button when the compact page

The links do not appear on the button when the compact page.
The button is dead, does not respond.
This is my code:
<div id="geral" class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!--Navbar header-->
<div class="navbar-header">
<!--Button-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--Nome do projeto-->
<a class="navbar-brand" href="#">Project name</a>
</div>
<!--navbar collapse-->
<div id="navbar1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Link </li>
<li>Link2 </li>
<li>Link3 </li>
</ul>
</div>
</nav>
</div>

Navbar collapse toggle button does not work in Bootstrap

I am currently experiencing an issue with Bootstrap where the toggle navbar button does not want to work when it is clicked.
I have searched around trying to find a solution yet none of these seem to be working.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">PC Service Manager</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><i class="fa fa-home fa-fw navfa"></i>Home</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa fa-sign-in navfa"></i>Login</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

Bootswatch dropdown menu not working

I am using Bootswatch Cosmo to build my website, but the dropdown menu isn't
working. You can view the page live at http://spencermehta.co.uk.
The html is:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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="../">Spencer Mehta</a>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Projects
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Spenbot</li>
</ul>
</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://twitter.com/spencermehta" target=_blank>Twitter</a></li>
<li><a href="http://twitch.tv/spencermehta" target=_blank>Twitch</a></li>
<li><a href="http://imraising.com/spencermehta" target=_blank>Donate</a></li>
</ul>
</div>
</div>
</nav>

Make sure that you have added jquery and bootstrap.js files and that their paths are correct.