In my web page I have a Bootstrap 3 navbar:
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Teachlab</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Sign in", '#' %></li>
</ul>
</div>
</nav>
<div class="container">
<%= yield %>
</div>
</body>
The problem is that navigation is to close to the edge of the screen. If I remove navbar-fixed-top from the navigation bar, it's working as I want.
Any hints?
Use .container-fluid as of 3.1.1.
The structure is not correct. .navbar-right goes on the .collapse container not on the ul.
SAMPLE: http://jsbin.com/eQIROsE/2/edit
<div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
<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="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
I ended up with overriding following:
.navbar-nav.navbar-right:last-child {
margin-right: 0;
}
But maybe there's another solution?
It's broken and won't fix in 3.x. Hack it.
.navbar-right {
margin-right: 0px;
}
The solution to this could be
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
It worked for me.
I really can't see why you'd have two .navbar-nav.navbar-right. Just wrap the navs in .navbar-right instead.
<div class="navbar-right">
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav">...</ul>
</div>
I got exactly the same issue today!
According to Bootstrap doc <ul class="nav navbar-nav navbar-right"> is correct.
Like you, I solved the problem by setting the nav navbar-nav navbar-right margin-right to 0px without noticing unwanted effects.
Notice that the margin-right value of .navbar-text.navbar-right:last-child is 0px while .navbar-nav.navbar-right:last-child margin-right value is -15px... Bizarre?
https://github.com/twbs/bootstrap/issues/13325
My not so elegant solution, but does the job very quickly, add a last list item;
<li><span> </span></li>
If you have problem with
margin-right: -15px;
in .navbar-right then just add in your css styles
.navbar-right {
margin-right: 0px;
}
and if this still doesn't work clear your browser from all history when your webstie was running and debug it again. It works :)
(Fixed in asp.net mvc)
I had the same problem in asp.net mvc c#, the way i fix it was by going to Contents/bootstrap.css i located the .navbar{} class and i add it a padding of 5 px,that worked for me.
Heres how it looks when you find it..
Related
I'd like to have a nav-bar where the items align to the right by default, but on nav-bar collapse, they align to the left.
Here's my HTML:
<nav class="navbar">
<div class="container-fluid" width='300px'>
<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="index.html"><img src="img/UWCL_logo_white.png" alt="Gibbs Lab" style="width:80px;height:auto;"></a>
</div>
<div class="collapse navbar-collapse navbar-left " id="myNavbar">
<ul class="nav navbar-nav navText " style='list-style-type: square'>
<li ><a class="dropdown-divider" href="production/index.html" id="navText">About</a></li>
<li>Staff</li>
<li>Data Dashboards</li>
<li>Current Projects</li>
</ul>
</div>
</div>
</nav>
Here's the way my nav-bar looks:
And, when collapsed:
How can I get those items (in the second picture) to align to the left of the page? I've tried the following, with no luck:
.navbar-collapse {
text-align:left;
float:left;
}
Thank you.
Add this class to your ul tag : mr-auto
Here's what I have, I've tried moving around my section inside the "brand" and do a pull-right, outside the brand and outside the collapse and do a pull-left/right, while also trying to place it before or after the collapse section.
When adding it to the brand section it works, but it goes down to a new line. How do I keep it on the same line?
<body>
<header>
<nav class="navbar navbar-default navbar-inverse" role="navigation" style="font-size: 18px">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 class="navbar-brand site-title" style="text-decoration: none; font-size: 24px; font-weight:bold">#Html.ActionLink("Manager", "Index", "Player")</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
#* <li class="active">#Html.ActionLink("Home", "Index", "Player")</li>
<li class="active">#Html.ActionLink("Match", "Index", "Match")</li> <li class="dropdown">
Profile <b class="caret"></b>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Change Password", "ManagePassword", "Account")</li>
<li>#Html.ActionLink("Update Profile Info", "UpdateProfile", "Account")</li>
<li>#Html.ActionLink("Log Off", "LogOff", "Account")</li>
</ul>
</li>
</ul>
</div>
<div>
<!-- I don't want it apart of the collapsible portion -->
<div class="navbar-right">
<ul class="nav navbar-nav">
<li class="active">#Html.ActionLink("Match", "Index", "Match")</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
Below is an example that shows how to have just about any kind of 'vanilla bootstrap' NAVBAR configuration you could want. It includes a site title, both collapsing and non-collapsing menu items aligned left or right, and static text. Be sure to read the comments to get a fuller understanding of what you can change. Enjoy!
Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
Fiddle with clearfix and expanded options on left side like normal: http://jsfiddle.net/jgoemat/u1j8o0n3/1/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
GNOMIS
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!-- This works well for static text, like a username -->
<li class="navbar-text pull-left">User Name</li>
<!-- Add any additional bootstrap header items. This is a drop-down from an icon -->
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-user"></span><b class="caret"></b>
<ul class="dropdown-menu">
<li>
Profile
</li>
<li>
Logout
</li>
</ul>
</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<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>
<!-- The Collapsing items navbar-left or navbar-right -->
<div class="collapse navbar-collapse navbar-left">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>News
</li>
<li>Shop
</li>
</ul>
</div>
<!-- Additional navbar items -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Locator
</li>
<li>Extras
</li>
</ul>
</div>
</div>
</nav>
You should be able to use pull-left and pull-right in 2 nav-header's to prevent the link from collapsing.
See: http://bootply.com/104747
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header pull-left">
<div class="navbar-brand">Brand</div>
</div>
<!-- I don't want it apart of the collapsible portion -->
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li class="active">No Collapse </li>
</ul>
<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 navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown">
Profile <b class="caret"></b>
<ul class="dropdown-menu">
<li>Change Password</li>
<li>Update Profile Info</li>
<li>Log Off</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Here is my other answer in Jade with some template logic just for fun :). See the other answer for additional info.
//- NOTE: 'navbar-default' styles the 'burger' and navbar text color, so remove it to add your own
nav(class="navbar navbar-default navbar-fixed-top", role="navigation")
.container
//- Title
.navbar-header.pull-left
a.navbar-brand(href='javascript:window.location.replace(window.location.origin);') GNOMIS
//- 'Sticky' (non-collapsing) right-side menu item(s)
.navbar-header.pull-right
ul.nav.pull-left
//- This works well for static text, maybe some initials
li.navbar-text.pull-left User Name
//- User Icon drop-down menu
li.dropdown.pull-right
a.dropdown-toggle(href='#', data-toggle='dropdown', style="color:#777; margin-top: 5px;")
span.glyphicon.glyphicon-user
b.caret
ul.dropdown-menu
li
a(href="/users/id", title="Profile")
| Profile
li
a(href="/logout", title="Logout")
| Logout
//- Required bootstrap placeholder for the collapsed menu
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
//- The Collapsing items navbar-left or navbar-right
.collapse.navbar-collapse.navbar-left
//- pull-right keeps the drop-down in line
ul.nav.navbar-nav.pull-right
li
a(href="/news") News
li
a(href="/shop") Shop
//- Additional navbar items
.collapse.navbar-collapse.navbar-right
//- pull-right keeps the drop-down in line
ul.nav.navbar-nav.pull-right
li
a(href="/locator") Locator
li
a(href="/extras") Extras
Using bootstrap v3.0
Id like to dynamically center the navigation bar. i.e. A fix that doesnt hardcode a width.
How is this achieved? Below is a sample of the standard navigation code with excess tags removed.
<!-- NAVBAR
================================================== -->
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">All Saints Church, Ripley.</a>
</div>
<div class="navbar-collapse collapse" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ./NAVBAR -->
The documentation states to float the navbar right insert .navbar-right #<ul class="nav navbar-nav navbar-right"> ... shown here http://getbootstrap.com/components/#navbar-component-alignment.
Having followed the methodology of this question: twitter bootstrap -- center brand in nav bar I cannot centralize the navigation using margin-left: auto; and margin-right: auto;
Any help is greatly appreciated.
For the record, I don't quite like this solution =) But a brute force way may be to add the following CSS:
.nav.navbar-nav {
float: none;
margin-left: auto;
margin-right: auto;
}
and the following jQuery to force the width down from the auto that is being inherited from .container:
var width = 0, $navbarLinks = $(".nav.navbar-nav");
$navbarLinks.children().each( function(idx) {
width += $(this).outerWidth();
});
$navbarLinks.width(width);
See the jsFiddle for testing.
I have found it easiest to use the nav-justified class for this purpose..
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav nav-justified">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
Demo
You can also constrain the width using an extra class. See the 2nd navbar in the demo.
I'm having trouble with lining up the connections and sign out sections on my navbar toggle. As you can see, the last two are out of line with the others. I am using the bootstrap 3 site as a reference, but I'm sure I have something not marked right.
HTML
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Site</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Dash</li>
<li>Edit Profile</li>
<li>Invite</li>
<li>Record A Message</li>
<li>
<p class="navbar-text">Connections <span class="badge">0</span></p>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text">Sign out as <a class="navbar-link" href="Login.aspx">User</a></p>
</li>
</ul>
</div>
<!-- /.navbar -->
</nav>
Thank you
I have tried a few different ways and the only solution I found without breaking the "mobile-first" approach was overriding the "navbar-text" class with a margin-left: 15px which also appears on the #media (min-width: 768px) line 4695.
.navbar-text {
margin-left: 15px;
}
I hope it helps ;)
trying removing the paragraph tags
In Twitter bootstrap 2.3.2 I can have something like:
http://jsfiddle.net/aQwUZ/3/
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
BRAND
<ul class="nav pull-right">
<li>
Fixed Link
</li>
</ul>
<div class="nav-collapse">
<ul class="nav">
<li>L1</li>
<li>L2</li>
</ul>
</div>
</div>
</div>
</div>
A twitter bootstrap navbar, where in mobile responsive view, "Fixed Link" stay visible in header.
Now, in bootstrap 3, after upgrade my code, I can only have:
http://jsfiddle.net/EC3Ly/4/
<nav class="navbar navbar-inverse navbar-fixed-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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BRAND</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
Fixed Link
</li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>L1</li>
<li>L2</li>
</ul>
</div>
</div>
</nav>
in mobile responsive view, I get 2 lines...
I tried to wrap in a "navbar-header" node http://jsfiddle.net/EC3Ly/5/ or in the first "navbar-header" without success.
What did I miss?
Thanks,
Alexandre
I faced the same problem with BS3, and the only way I found to resolve it was to use a combination of pull-left and pull-right
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">BRAND</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li>
Fixed Link
</li>
</ul>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>L1</li>
<li>L2</li>
</ul>
</div>
</div>
</nav>
Working demo: http://bootply.com/78856
The two lines in the mobile navbar are caused by the clearfix of the navbar-header:
.navbar-header {
.clearfix();
#media (min-width: #grid-float-breakpoint) {
float: left;
}
}
You could use media queries and css to undo this clearfix (and add a new before the collapsed dropdown)
.navbar-right {float: right !important;}
#media(max-width:767px)
{
.navbar-right {margin-right:20px;}
.navbar-header:after
{
clear: none;
}
.navbar-nav.navbar-right > li { float: left; }
.navbar-collapse:before {clear:both;}
.navbar-collapse {overflow-y: hidden;}
.navbar-collapse.in {overflow-y: visible;}
.navbar{border-color: #101010; border-width: 0 0 1px;}
.navbar-collapse.in > ul {border-color: #101010; border-top:1px double;}
}
}
demo: http://bootply.com/82366
The media queries also add a float right for the navbar-right on smaller screens. To take this code in production, you maybe will fix the borders and possible the navbar css transisions too.
The problem is with the point at which the navbar collapses. By default, Bootstrap collapses at 768px. If you increase this, your navbar will collapse sooner and your problem will disappear.
The best way to do this is to customize your bootstrap file and change the #grid-float-breakpoint to 850px (or whatever size you need). You can easily customize bootstrap 3 from http://getbootstrap.com/customize/?id=9720390
Hope this helps.
I fixed it this way. Just right after the brand add two new lines with the same class and an additional class.
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">Home</a>
<!-- Fake branding to avoid breaking up navbar -->
<a class="navbar-brand navbar-brand-fake">Item 1</a>
<a class="navbar-brand navbar-brand-fake">Item 2</a>
And add this to your css file:
a.navbar-brand-fake {
font-size: 15px;
line-height: 21px;
margin-left: 2px !important;
}
Home, Item 1 and Item 2 remain in the navbar when resizing and the navbar won't break.