I want to locate the navbar to the right of the screen. It seemed trivial before I tried to do that.
Here is what I did:
index.html
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<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>
</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>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
and in bootstrap.css I floated the navbar-brand to right:
.navbar-brand {
float: right;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
But it is still on the left! How to fix this?
Try this, its actually the .navbar-header that is floated left by default, so adding a float to .navbar-brand will not actually change anything.
.navbar-header {
float: right;
}
JsFiddle
Or adding the .navbar-right class to the .navbar-header would also work.
<div class="navbar-header navbar-right">
Related
Bootstrap newbie question. I am using a variation of ZimSystem's Left-Center-Right Aligned NavBars. I put my Brand on the left.
There are two seemingly related problems.
1) On large screens the fb-like button hangs off the right-hand side of the page.
2) On small screens, the Brand is moved down a couple lines so that the first menu item is concealed by it.
I have tried using absolute positioning in both cases, but that did not resolve the issue.
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> <!-- navbar-default removed -->
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<a class="navbar-brand navbar-left katrielsheader" href="#"><img src="images/Katriels_Kleaners_Script.png" alt="Katriels Kleaners"></a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-center">
<li class="nav-item"> <a class="nav-link" href="#philosophy">Our Philosophy</a> </li>
<li class="nav-item"><a class="nav-link" href="#priceList">Price List</a>. </li>
<li class="nav-item"><a class="nav-link" href="#contactus">Contact Us</a>. </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<div class="fb-like" data-href="http://www.kokleaners.com" data-layout="button_count" data-action="recommend" data-adapt-container-width="true" data-show-faces="false" data-share="true"></div>
</ul>
</div>
</nav>
CSS
#charset "UTF-8";
/* CSS Document */
html, body{
height:100%;
}
.navbar-default {
background-color:#72c5d5;
border-color: #284449;
z-index: 10;
opacity: 0.9;
}
.nav.navbar-nav.navbar-center li a {
color: #254053;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
color: #EF3927;
}
Here is the code I used for the fb like positioning that did not work.
#media all and (min-width:768){
.navbar-collapse fb-like{
position:absolute;
right:25;
Seems like this should be a pretty simple fix. But I am perplexed.
Here is the bootply.
Next time put it on jsfiddle.net
Replace your facebook div widget with this and it should do the trick. Your width was awkwardly set. So I changed it to 100% and it formatted properly.
<div class="fb-like fb_iframe_widget" data-href="http://www.kokleaners.com"
... " class="" style="border: none; visibility: visible; **width: 100%**; height: 20px;"></iframe></span>
</div>
The problem with the navbar-brand spacing was resolved by moving its placement into div.
See comments below for clarification.
The spacing of the FB-Widget can also be resolved by setting the margins for navbar-right in custom CSS.
.navbar-right{
margin-top: 20px;
margin-right:20px;
}
To improve layout on small screens, move up navbar-brand as so:
<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 navbar-left katrielsheader" href="#"><img src="images/Katriels_Kleaners_Script.png" alt="Katriels Kleaners"></a>
</div>
I'm using the Boostrap's navbar, inside which there is an image brand (responsive) and some text (menu items). I would like to center the text within the div, but I don't know how: if I center the text in the CSS, there is more space between the left corner of the monitor and the "Home" and and less space between the last "Link" in the right and the right corner in the monitor. It's as if my code takes the div size, subtracts the image size and center the text in the remaining space.
I thought about putting a negative left margin, but because the image is responsive I don't know what value to give.
Can you help me?
http://jsfiddle.net/a001dxn6/2/
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#"><img src="official_logo.png" /></a>
</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 class="active">Home <span class="sr-only">(current)</span></li>
<li class="dropdown">
Specialità <span class="caret"></span>
<ul class="dropdown-menu">
<li>
</li>
<li>La pizza napoletana</li>
<li>Le specialità della casa</li>
</ul>
</li>
<li>Menu</li>
<li>Eventi</li>
<li>Gallery</li>
<li>Contatti</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
CSS
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar-default {
background-color: transparent;
border-color: darkorange;
text-align: center;
}
.navbar-brand > img {
max-height: 100%;
max-width: 100%;
}
[fixed] Just add CSS: .navbar-brand { position: fixed; left: 1vw; }
can't really test with the fiddle, since there's no image.
have you tried removing text-aling: center from .navbar classes
and adding:
.dropdown, .dropdown-menu{
text-align: center;
}
? let me know if it works.
I would like to know how to make an image fit bootstrap navbar height (proportionally), here's a descriptive image:
Any idea?
I'm using this structure:
<nav class="navbar navbar-default">
<divclass="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
If you're simply trying to adjust the size of an image to correspond to the height of a default navbar (min-height: 50px), simply use the below CSS as a base depending on how you want the image to fit.
In this example, the image will cover it's part of the navbar completely.
See working Snippet.
body {
padding-top: 70px;
}
.navbar.navbar-inverse {
border: none;
}
.navbar .navbar-brand {
padding-top: 0px;
}
.navbar .navbar-brand img {
height: 50px;
}
<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-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="#">
<img src="http://placehold.it/350x150/f00/fff">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<img src="http://placehold.it/350x150/f00/fff" />
<h4>The Same Image At Full Scale</h4>
</div>
in a previous project of mine I also encountered some issues with this. Here is how I solved the problem:
HTML:
<nav id="myNavbar" 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="#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="index.html" class="smoothScroll"><img src="img/logo.png" ondragstart="return false;" alt="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li>
<a>Menu Item1</a>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
And the CSS for it:
.navbar-fixed-top {height: 40px;}
.navbar-brand img {height: 40px;}
So setting the navbar and the logo-image to the same height (and not giving it width, thus it will be automatically adjusted) solved the problem for me with good positioning. Two possible cases:
you want a fixed navbar:
.navbar-brand img {position:fixed;right:0;top:0}
you want a header on top:
.navbar-brand img {position:absolute;right:0;top:0}
In both cases I set it to top-right corner of the site, but you can adjust that easily. So the key is: same height navbar and image, with the image positioned well. (Then margin-padding or exact position of the image can easily be set in CSS)
Hope it helped,
Andrew
EDIT: Regarding fixed navbar please check the Bootstrap documentation (it has built-in class like navbar-fixed-top and such).
I'm trying to create a pretty simple double-navbar effect with Bootstrap. The only problem I have right now is that the second/bottom navbar isn't stretching across the whole browser width. Here's my code...
<nav class="navbar navbar-fixed-top navbar-inverse">
<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" style = "line-height: 30px;">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-menu-hamburger" style="color:#fff;"></span>
</button>
<a class="navbar-brand" href="#" style = "line-height: 30px;">brand</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- <li>Button</li> -->
</ul>
</div><!-- /.nav-collapse -->
<!-- this is the second navbar element that never takes up the full width available-->
<div class="nav navbar-default" style="background-color: #66CCFF;">
<ul class="nav navbar-nav">
<li></li>
<li class="divider-vertical"></li>
<li></li>
<li class="divider-vertical"></li>
<li></li>
</ul>
</div>
</div><!-- /.container -->
</nav><!-- /.navbar -->
I've played with various different navbar types and css styles (e.g. width:100%), but I can't seem to figure out how to make the second navbar (i.e. the one containing the 3 glyphicons) the same width as its parent.
Really appreciate any ideas on what I might be doing wrong!
You need to use container-fluid instead of container since latter has a fixed width.
.container-fluid still contains CSS rules for padding. You may try to overwrite it using custom class.
.container-fluid.no-padding {
padding: 0;
}
.no-padding .navbar-header {
padding-left: 10px; /* Align the Brand text */
}
#media (max-width: 768px) {
.no-padding .navbar-nav {
padding-left: 10px; /* Align the icons on small screens */
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid no-padding">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="line-height: 30px;">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-menu-hamburger" style="color:#fff;"></span>
</button>
<a class="navbar-brand" href="#" style="line-height: 30px;">brand</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- <li>Button</li> -->
</ul>
</div>
<!-- /.nav-collapse -->
<!-- this is the second navbar element that never takes up the full width available-->
<div class="nav navbar-default" style="background-color: #66CCFF;">
<ul class="nav navbar-nav">
<li>
</li>
<li class="divider-vertical"></li>
<li>
</li>
<li class="divider-vertical"></li>
<li>
</li>
</ul>
</div>
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
.navbar > .container {
padding-left: 0;
padding-right: 0;
}
just removing the padding from container changes all the instances of container on your page.
you then want to add padding back to your navbar-header
.navbar > .container {
padding-left: 0;
padding-right: 0;
}
.navbar .navbar-header {
padding: 5px 10px;
}
I'm attempting to preserve the position of two menu element (Home icon and Foo) that render as desired on large devices:
But are displayed as rows on a mobile device (obscuring content):
Is there a way to force these two menu items to display to the right of the Brand menu and on the same 'row'?
Sample: http://www.bootply.com/Fjq7ZXSDXc#
You can create a separate div inside the navbar-header: See example Snippet.
.navbar-header .nav-icons {
padding-top: 12px;
position: absolute;
display: inline-block;
top: 0;
}
.navbar-header .nav-icons span {
padding-left: 5px;
padding-right: 5px;
font-size: 20px
}
.navbar-header .nav-icons a {
color: #fff;
text-decoration: none;
}
<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-static-top custom-navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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" rel="home" href="#" title="Help"> Brand</a>
<div class="nav-icons">
<a href="#"> <span class="glyphicon glyphicon-home"></span>
</a>
<a href="#"> <span> Foo</span>
</a>
</div>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-1">
<!-- Non-collapsing right-side icons -->
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<!-- /.container -->
Try to add this in your .css
.nav-collapse .nav > li {
display: inline-block;
}