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.
Related
I want to create two columns in my navbar. I use Bootstrap css.
All buttons are now lined out to the left. I would like to have the two last buttons to line out to the right... Is this possible and how do I do it ?
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" background-color: #eb8d22>
<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="index.html"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>FOOD</li>
<li>FOTO'S</li>
<li>ARCHIEF</li>
<li>PETER</li>
<li>VAKANTIEWONING</li>
</ul>
</div>
</nav>
The second <ul> list with 2 items is on the right side. Groet uit regio den haag.
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #eb8d22;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarList" aria-expanded="false">
<span class="sr-only">Toggle menu</span>
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
</div>
<div class="collapse navbar-collapse" id="navbarList">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>FOOD</li>
<li>FOTO'S</li>
<li>ARCHIEF</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>PETER</li>
<li>VAKANTIEWONING</li>
</ul>
</div>
</div>
</nav>
The button that is labelled "Login" needs to be pushed to the right of the navbar and lined up properly with other buttons. Here is a jfiddle to see what it's doing. I am using bootstrap to design this and am having trouble with positioning of certain buttons.
https://jsfiddle.net/sterlingmd17/tk17zjfq/1/
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="{{a}}"> Home</li>
<li class="{{b}}"> Order form</li>
<li class="{{c}}"> About Swirlz</li>
<li class="{{d}}"> Contact</li>
<!--TODO fix login button positioning -->
<div class="btn-group dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Login
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"></div>
</div>
</ul>
</div>
</nav>
First, move the button div outside of the unordered list tags, then add the classes navbar-form and navbar-right to the button div.
It should look like this
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="{{a}}"> Home</li>
<li class="{{b}}"> Order form</li>
<li class="{{c}}"> About Swirlz</li>
<li class="{{d}}"> Contact</li>
</ul>
<!--TODO fix login button positioning -->
<div class="navbar-form navbar-right btn-group dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Login
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"></div>
</div>
</div>
I have a standard navbar in bootstrap. When it collapses, I see nothing but a hamburger menu button and all li's are folded underneath.
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<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>
</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>Home</li>
<li>Store</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
When it collapses (mobile/small screen) I would like for the "Store" link to stay visible at the top of the navbar, left of the Hamburger menu. Can I do this using bootstrap's classes, or do I need to do this manually via #media?
Here I got a solution. Try putting the button after
<div class="navbar-header">
and before
<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>
Here is a JsFiddle. What I basically did:
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="btn btn-default hidden-lg hidden-md hidden-sm" aria-label="Left Align" href="/store">
Store
</button>
<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>
</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>Home</li>
<li>Store</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
</div>
Hope I could help you and my answer solved your problem. :)
I want to change the navbar-brand so that the two words are two separate colors. I am having trouble doing that at the moment as no matter what CSS I use it doesn't seem to change the color. The padding I used does take effect so it is targeting it, just not changing the color. Could anyone help me with what I need to do?
<nav class="navbar navbar-inverse navbar-fluid" role="navigation">
<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="#"><div class="translation">TRANSLATION</div><div class="commons">COMMONS</div></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav nav pull-right">
<li>
Home
</li>
<li>
Register
</li>
<li>
Log In
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Donate
</li>
</ul>
</div>
</div>
Use SPAN and assign a color.
.red {
color: red;
}
.white {
color: white;
}
<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.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-fluid" role="navigation">
<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="#"><span class="red">TRANSLATION</span> <span class="white">Commons</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav nav pull-right">
<li>Home
</li>
<li>Register
</li>
<li>Log In
</li>
<li>About
</li>
<li>Contact
</li>
<li>Donate
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
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