I have the following html, which features a bootstrap nav bar. As you can see, there is a menu item called "Coverage" with one link called "Add Coverage". This works fine on larger screens, but when I resize to make it smaller, as expected the Toggle navigation appears. When I click this and the menu expands to show everything, the Funds, Intraday Orders, and Reports still work fine, however clicking on the Coverage item does NOT result in the Add Coverage link being shown. Nothing happens. What am I doing wrong?
<body>
<nav class="navbar navbar-default navbar-static-top" style="padding: 0px;">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand pull-left" href="#Url.Action("Index", "Home", new { goHome = "true" })"><span class="glyphicon glyphicon-home"></span></a>
</div>
<div class="navbar-header">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<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 navbar-left">
<ul class="nav navbar-nav pull-left menu-item-spacing">
<li>#Html.ActionLink("Analysts", "Index", "Analyst")</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Coverage<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Add Coverage", "AddCoverageSearch", "Coverage")</li>
</ul>
</li>
<li>#Html.ActionLink("Funds", "List", "Holding", null, null)</li>
<li>#Html.ActionLink("Intraday Orders", "Account", "Blotter", new { analystname = #user.UserName }, null)</li>
<li>Reports</li>
</ul>
</div>
</div>
</div>
</nav>
HTML created is as follows:
<nav class="navbar navbar-default navbar-fixed-top" style="padding: 0px;">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand pull-left" href="/?goHome=true"><span class="glyphicon glyphicon-home"></span></a>
</div>
<div class="navbar-header">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<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 navbar-left">
<ul class="nav navbar-nav pull-left menu-item-spacing">
<li>Analysts</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Coverage<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>All Coverage</li>
<li>Coverage Assignments</li>
<li>Portfolio Coverage</li>
<li>Portfolio Snapshot</li>
<li>Writeup Sections</li>
</ul>
</li>
<li>Funds</li>
<li>Intraday Orders</li>
<li>Reports</li>
</ul>
</div>
</div>
</nav>
The structure of the code you've presented seems very atypical for Bootstrap. For example, you have your .navbar-toggle inside a duplicate of .navbar-header which also houses your .collapse.
If you were to restructure your Navbar component to better match the recommendations and styles of Bootstrap 3.x you would use code like below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#null"><span class="glyphicon glyphicon-home"></span></a>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<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">
<ul class="nav navbar-nav">
<li>Analysts</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Coverage<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>All Coverage</li>
<li>Coverage Assignments</li>
<li>Portfolio Coverage</li>
<li>Portfolio Snapshot</li>
<li>Writeup Sections</li>
</ul>
</li>
<li>Funds</li>
<li>Intraday Orders</li>
<li>Reports</li>
</ul>
</div>
</div>
</nav>
In the above code every link under .dropdown-menu appears as expected. The entire navigational menu collapses on smaller screens, again as expected. If the above code results in a different result when inserted into your project I would suspect the problem is some additional CSS or JavaScript that is in conflict.
Two Caveats I would offer:
(1) The above code assumes you're using Bootstrap 3.x. This is based on some of the classes called in your code which do not exist in 4.x. If you're using 4.x that might also be causing some of your problems as the structure for the Navbar component has changed.
(2) For the purposes of a minified example I've removed a lot of additional styles or references to classes that aren't part of Bootstrap. I've also removed the class="dropdown-toggle hidden-sxm" from under the "Reports" link as that link is not a dropdown menu and hidden-sxm is not a Bootstrap class.
Related
Good day guys, I had a bit trouble in the collapse navbar. It doesn't align to the right side of the browser when i clicked the collapse button?
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
My Site
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contacts</li>
<li class="dropdown">
Login<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
<li>Logout</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
Sample output
You must use navbar-header, then you have brand and hamburger icon on the same level and the whole content of your menu below that line. So basically your code should look something like that:
<div class="navbar-header">
My Site
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
Link to live example: http://www.bootply.com/jowa705iHl
Here you can find all the needed documentation: http://getbootstrap.com/components/#navbar
Best of luck :)
You need to wrap the collapse button and brand link in .navbar-header:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
My Site
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contacts</li>
<li class="dropdown">
Login<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
<li>Logout</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
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.
My Bootstrap collapsible menu isn't working. I can't figure out where is my problem?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#top">the company</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="menu" id="#myNavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" data-toggle="collapse" data-target="myNavbar">
<li class="scrollable">About me</li>
<li class="scrollable">Portfolio</li>
<li class="scrollable">Contact Me</li>
</ul>
</div>
</div>
</nav>
You have duplicate attributes for class in multiple divs as well as multiple data-toggle="collapse" & data-target="myNavbar".
Also your target ID has the # in it, it should not: id="#myNavbar" should be id="myNavbar"
Validate your HTML and refer to the refer to the Docs
Working Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#top">the company</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="myNavbar" class="collapse navbar-collapse menu">
<ul class="nav navbar-nav navbar-right">
<li class="active scrollable">About me
</li>
<li class="scrollable">Portfolio
</li>
<li class="scrollable">Contact Me
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The problem was with:
Your collapse navbar hierarchy.
The div where you used menu class.
Syntax
The anchor tag: <a class="navbar-brand" href="#top">the company</a> should come after button tag.
And the menu class should be used along with other classes: <div id="myNavbar" class="menu collapse navbar-collapse">, instead of <div class="menu" id="#myNavbar" class="collapse navbar-collapse">
<div id="#myNavbar" should be changed to <div id="myNavbar". Remove the #, you don't need it while adding id to the div.
And final issue: Don't use data-toggle="collapse" data-target="myNavbar"> again in the ul tag. Just use <ul class="nav navbar-nav navbar-right">
Try running the code snippet below and don't forget to include Bootstrap and jQuery libraries in your webpage. Cheers!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#top">the company</a>
</div>
<div id="myNavbar" class="menu collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scrollable">About me</li>
<li class="scrollable">Portfolio</li>
<li class="scrollable">Contact Me</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-findcond navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="">
<img alt="null">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Products
</li>
<li class="active">About
</li>
<li class="active">Testimonials
</li>
<li class="active">Order
</li>
<li class="active">Contact Us
</li>
</ul>
</div>
</div>
</nav>
<section id="products">
<div></div>
</section>
I change my section class="products" to section id="products", and when I click it, nothing happen.
The reason why I used id is because the active navbar is not showing. I'm using findcond navbar bootstrap.
You can use like this
<section id="products" class ="products">
Since I don't know about back-end operations, cannot sure about it. I trust some operations are done by that css class products.
I'm trying to make a menu for smartphones & tablets, but when I create it, it always overflows the content of my website.
The effect I want to achieve is the same as the Twitter Bootstrap website — When you open it with smartphones, you can press the button and the menu rolls down and pulls the content of the website.
Here is my code:
<div class="dropdown">
<button class="navbar-toggle hidden-lg collapsed" data-toggle="dropdown" data-target="navbar-header" type="button">
<span class="glyphicon glyphicon-collapse-down">
</span>
</button>
<div class="col-xs-12 dropdown-menu navbar-inverse" role="menu">
<a class ="divider" href="#">Accueil</a><br />
<a class ="divider" href="#">Centres d'Interets</a><br />
<a class ="divider" href="#">CV</a><br />
<a class ="divider" href="#">Contact</a><br />
</div>
</div>
You can use the example from the documentation as a start:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
...
</div>
</nav>
You can find it here.
Try the below code. Courtesy: http://bootswatch.com Adjust the menu according to your requirements
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Download <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
In the above code,
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Gives the desired effect when the window size changes in browser or on small screens (Mobiles and tabs).