I took help from this link: http://www.bootply.com/lJgThXaVXi# when bulding my double navbar, and the effect I have is the same as in this example. However, When my navbar collapses I get 2 buttons instead of 1 (the example only get one collapse-button that shows the data from both navbars).
Also, when I press the collapse-button of navbar1 it shows everything in navbar1, however when I press the collapse-button in navbar2, that triggers the collapse-button of navbar1. Ive been going over the code in the example in detail and can not find anything I do differently.
Basically I wish for 1 collapse button showing all the information from both navbars.
Code:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
Logo
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Add site</li>
</ul>
<div class="col-sm-3 col-md-3" style="background-color:red">
<div class="navbar-form" role="search">
<div class="input-group">
<asp:TextBox ID="TextBoxSearch" CssClass="form-control" placeholder="Search" runat="server"></asp:TextBox>
<div class="input-group-btn">
<asp:LinkButton ID="LinkButtonSearch" CssClass="btn btn-default" OnClick="search_click" runat="server"><i class="glyphicon glyphicon-search"></i></asp:LinkButton>
</div>
</div>
</div>
</div>
<ul class="nav navbar-nav navbar-right" style="background-color:blue">
<li >
<asp:LinkButton ID="LinkButtonRegister" runat="server" OnClick="Register">Register</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButtonLogin" data-toggle="modal" data-target="#loginModal" runat="server">Log in</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButtonLogout" runat="server" OnClick="Logout">Log out</asp:LinkButton></li>
</ul>
</div>
</div>
</div>
<!-- END OF FIRST NAVBAR -->
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Add site</li>
</ul>
</div>
</div>
</div>
You have two collapse buttons in your code. Remove one (of these):
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Also, I created a demo of a double nav bar collapsing with one button (that I use), using the bootstrap demo navbars:
My Bootstrap Double Top Nav Bars
Here's the relevant code:
<div class="navwrap">
<!-- first navbar -->
<div class="navbar navbar-default navbar-static-top no-bottom-margin">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Brand</span>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-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>
<nav class="collapse navbar-collapse" role="navigation">
<div class="navbar-right">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- second navbar -->
<div class="navbar-inverse">
<div class="container">
<nav class="collapse navbar-collapse nested-nav global-nav" role="navigation">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
With the addition of this CSS rule:
.no-bottom-margin{margin-bottom:0;}
HTH,
-Ted
Related
I'm trying to get the notification icon with the badge on the same row as the drop down menu on the right and the header on the left. I'm also looking to have the notification icon with badge just to the left of the Action menu on the right. Not sure how to get that working correctly.
https://jsfiddle.net/DTcHh/33742/
<nav class="navbar navbar-inverse navbar-static-top">
<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>
<a class="navbar-brand" href="/">Reclamation</a>
</div>
<div style="display: inline-block;">
<button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
<span class="glyphicon glyphicon-comment"></span>
</button>
<span class="badge badge-notify">3</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Actions <span class="caret"></span>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
</div>
</div>
</nav>
You were really close, I just moved your notification icon down in the HTML, and then added the class pull-right to it since you are using bootstrap.
See my fiddle.
<nav class="navbar navbar-inverse navbar-static-top">
<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>
<a class="navbar-brand" href="/">Reclamation</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Actions <span class="caret"></span>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
<div class="pull-right" style="display: inline-block;">
<button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
<span class="glyphicon glyphicon-comment"></span>
</button>
<span class="badge badge-notify">3</span>
</div>
</div>
</div>
</nav>
The main issue is that you have display: block!important on your .navbar-collapse.collapse class. Change that to display: inline-block and everything will be in the same row in your container-fluid. I also wouldn't apply an inline style to your container div for your button and badge, give it a class and style from there.
I am using bootstrap to have a side navigation bar in mijn application. I would like the dropdown menu's to be open by default, but I can't work it out...
My code:
<nav class="navbar navbar-default sidebar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-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>
</div>
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home of {{ Auth::user()->name }}<span style="font-size:16px;"></span></li>
<li class="dropdown">
Input <span class="caret"></span><span style="font-size:16px;"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Form</li>
</ul>
</li>
<li class="dropdown">
</span><span style="font-size:16px;"></span>
<ul class="dropdown-menu" role="menu">
<li>Results</li>
</ul>
</li>
<li>Tools<span></span></li>
<li>Documentation<span></span></li>
#endif
</ul>
</div>
</div>
</nav>
Try to change
<li class="dropdown">
to
<li class="dropdown open">
I am trying to implement twitter bootstrap collapsible navigation bar. On Desktop navigation bar is visible but on mobile screen it's not visible.
Here is View Part
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><img src="/x/img/X.png" style="width:80px; position:relative; top:-20px;"></img></h3>
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="margin-top:15px;background-color:rgba(255,255,255,.4)">
<li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a></li>
<li ><a th:href="#{/X}" href="#">X</a></li>
<li><a th:href="#{/Y}" href="#">Y</a></li>
<li><a th:href="#{/Z}" href="#">Z</a></li>
<li><a th:href="#{/T}" href="#">C</a></li>
<li class="active"><a th:href="#" href="#">Blog</a></li>
<!--li>Help</li-->
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Can some one help me to fix this issue. I have included collapse.js in my path.
You're missing the navbar class which is the first line of the default navigation in Bootstrap. See Docs.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><img src="http://placehold.it/350x150" style="width:80px; position:relative; top:-20px;"></img></h3>
<nav class="navbar navbar-default">
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" style="margin-top:15px;background-color:rgba(255,255,255,.4)">
<li class="active"><a class="call_us btn btn-default no-rounded btn-hollow" th:text="${'+91 444}" style="cursor:default; pointer-events:none;"> Call Us 555</a>
</li>
<li><a th:href="#{/X}" href="#">X</a>
</li>
<li><a th:href="#{/Y}" href="#">Y</a>
</li>
<li><a th:href="#{/Z}" href="#">Z</a>
</li>
<li><a th:href="#{/T}" href="#">C</a>
</li>
<li class="active"><a th:href="#" href="#">Blog</a>
</li>
<!--li>Help</li-->
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</div>
After some time I managed to place the dropdown list totally on the right and right-align the form and the dropdown menu. I also used a glyphicon for the dropdown list.
My questions are:
Is it correct to align components in the way I did or is there a best practice to do this?
Can I use a glyphicon in a dropdown class or do I need to use a button dropdown list for that?
You can check my code below. I hope you can advice me or give a good tip. Thank you.
<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="{{ path('homepage') }}">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>Acción #1</li>
<li>Acción #2</li>
<li>Acción #3</li>
<li class="divider"></li>
<li>Acción #4</li>
</ul>
</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
Use navbar-right with your navbar-form and place it ouside of the UL. See example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<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="{{ path('homepage') }}">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>Acción #1
</li>
<li>Acción #2
</li>
<li>Acción #3
</li>
<li class="divider"></li>
<li>Acción #4
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
I am trying to add search form to the top navbar code shown below so that it will appear just before the Logout link with a small space and aligned to the right side, but it always appear either after the logout link or it will expand the navbar and look bad.
So can someone please help me by telling me what I am missing here? Thanks for your time.
Head section:
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<title>Test</title>
</head>
Body section:
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Company</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="active dropdown">
Employees <b class="caret"></b>
<ul class="dropdown-menu">
<li>New Employee</li>
<li class="divider"></li>
<li class="nav-header">Reports</li>
<li>Employees List</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="input-small" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<li>Logout</li>
</ul>
</div>
</nav>
You cannot put a <form> inside of an <ul> but not wrapped in a <li> so here is what seems to work:
jsFiddle
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Company</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li class="active dropdown">
Employees <b class="caret"></b>
<ul class="dropdown-menu">
<li>
New Employee
</li>
<li class="divider"></li>
<li class="nav-header">Reports</li>
<li>
Employees List
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
logout
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>