So I'm trying to get my logo to fit inside my navbar without it "falling out" like so: http://i.imgur.com/KoHcBod.png
The relevant code:
HTML:
<nav class="container-fluid navbar navbar-inverse navbar-static-top" role="navigation">
<ul class="nav navbar-nav">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="/"><img id="navbar-logo" src="/images/logo_only.png"></a>
</ul>
<ul class="navbar-collapse nav navbar-nav navbar-right">
[[if .User]]
<li><a id="currentUser" href="/account/home">[[.User.Username]]</a></li>
<li>Sign out</li>
[[else]]
<li class="[[.SignupActive]]">Sign up</li>
<li class="[[.LoginActive]]">Log in</li>
<!--li>Support</li-->
[[end]]
</ul>
CSS:
/* ---------- NAVBAR STYLE -----------
----------------------------------- */
#navbar-logo {
height: 50px;
}
I've searched multiple places and I can't figure out for the life of my how to do this without messing around with height (of the navbar) manually. I'd like it to look as if the logo was the same height from the top and bottom of the navbar. Thanks a ton.
This is a common occurrence in Bootstrap with logos, and you need more context, because there are other ways to do this, but based on your snippet of code, you can do this:
.navbar-brand{padding:0 !important}
#navbar-logo {
height:100%;
width:auto;
max-height: 50px;
}
Related
Can't quite seem to wrap my head around a bootstrap nav having elements on bottom and top of navbar, while still utilizing the collapsable navbar.
Here is what I've tried: Fiddle
As you can see, I was able to achieve the text on top and bottom of navbar (while still using the collapsable navbar feature), but when you look at it in mobile (as in, when the menu is collapsed and you click on the hamburger logo), it's completely messed up.
So this has me wondering if perhaps I'm not approaching this the right way?
Here is the CSS:
#mainNavBarTop {
position: absolute;
margin-top: -10px;
top: 0;
left: 0;
}
#mainNavBarBottom {
position: absolute;
margin-bottom: -10px;
bottom: 0;
left: 0;
}
and HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><button class="navbar-toggle collapsed" type="button" 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><img src="" /></div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav" id="mainNavBarBottom">
<li class="bottom">About</li>
<li class="bottom">Contact</li>
</ul>
<ul class="nav navbar-nav" id="mainNavBarTop">
<li class="bottom">About</li>
<li class="bottom">Contact</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group"><input class="form-control" type="text" placeholder="Search"/></div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
</div>
</div>
</nav>
If you want the navigation links to display over multiple lines on a desktop view, all you have to do is specify a width for the navbar that accommodates for the image, and also add enough items to the dropdown so that they overflow.
Optionally, you can have the links pressed up against the right rather than the left by adding float: right to the li elements of the navbar. Note that this will reverse the order of the items in the list, so you may wish to list the links in reverse order in the HTML itself if you opt for this.
You can see this by expanding the snippet below, or by viewing the JSFiddle here. The links all stay directly below one another in the collapsed menu, though occupy two lines in the desktop view. Expanding the JSFiddle to the maximum width shows that the links will revert back to a single line when there is enough space to contain them.
#media (min-width: 768px) {
.navbar-nav.pull-right {
width: calc(100% - 120px); /* 100% - image width */
}
.navbar-nav>li {
float: right; /* Optionally align items to the right */
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container">
<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>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive" src="http://placehold.it/120x30" width="120px;" /></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav pull-right">
<li>Saved searches</li>
<li>Settings</li>
<li>About</li>
<li>Sign In</li>
<li>Another Link</li>
<li>Another Link</li>
<li>Another Link</li>
<li>Another Link</li>
</ul>
</div>
</div>
</nav>
Hope this helps! :)
I want to make bootstrap navbar smaller and keep it right but small issue here i have some data dynamically loading at right side of grid that is overlapped by navbar so i want to keep navbar offset around 3 columns from right,so I added css class container-panel to make width smaller and to keep it to right i have margin-left.But on different pixels it breaks and navbar is overlapped on other elements. Is there any fix in bootstrap to achieve this task ?
main.html
<div class="col-md-10">
<nav class="navbar navbar-default container-panel">
<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>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="z-index:10;">
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<span class="glyphicon glyphicon-file"></span><span class="caret"></span>
<ul class="dropdown-menu">
<li><span ng-click="createXml()">Create new BPMN Diagram</span></li>
</ul>
</li>
<li><span class="glyphicon glyphicon-folder-open"></span></li>
</ul>
</div>
</div>
</nav>
</div>
main.css
.navbar.container-panel {
width:554px;
margin-left: 760px;
}
Use a variable width, like vw or % to adapt the width relative to the screen width. You may have to tweak the vw or % at smaller breakpoints as to not cut off your navbar content.
.navbar.container-panel {
width:60vw;
margin-left: 760px;
}
or
.navbar.container-panel {
width:60%;
margin-left: 760px;
}
hey guys i am basically new to css and trying to build a bootstrap navbar ,the issue is that i had to center certain contents of the navbar I.E , center the menu items .
basically after going through the source of the bootstrap navbar i figured out that the reason all elements in the navbar appear in one line rather then moving on to the next line is because the elements in the navbar are floated either right or left , the movement you remove the floats the alignment is broken ,
so what i tried to do is : - HTML code(TYPICAL bootstrap markup) :
<nav role="navigation" class="navbar navbar-default navbar-fixed">
<button type="button" data-target="#navbarCollapse" data-toggle="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>
<!-- Brand -->
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
</div>
</div>
</nav>
And the CSS(customized css) :
.navbar-default .navbar-collapse ul.navbar-nav{
text-align: center;
float: none;
width: 300px;
}
.navbar-default .navbar-collapse ul.navbar-nav li {
float: none;
display: inline-block;
}
.brand-holder {
height: 200px;
background: #000;
}
.navbar-fixed {
position: fixed;
width: 100%;
}
The thing to notice is see how i have removed the floats in ul.navbar-nav and ul.navbar-nav li
Fiddle here . , now see how the contents of
<ul class="nav navbar-nav navbar-right">
<li><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
is floated to the next line . is there anyway that i can have the contents back inline with the menu items ?
P.S. :: i would really like to avoid using absolute positioning .
Thank you.
Alex-z.
If my understanding of your question is correct, probably by changing the CSS as below
.navbar-default .navbar-collapse ul.navbar-nav{
text-align: center;
float: none;
text-align:left;
and instead of keeping an another UL for the FB Logo keep the whole Li as in the first Ul itself and aligning to right, should help
so the final html will be
<nav role="navigation" class="navbar navbar-default navbar-fixed">
<button type="button" data-target="#navbarCollapse" data-toggle="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>
<!-- Brand --> <!-- </div>-->
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li style="float:right"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></li>
</ul>
</div>
</div>
You can have a check on the result fiddle
Hope this helps.
Thanks,
Philemon
I am trying to make a Navbar for my site that has a dropdown menu on the left, image in the center, and collapsable item on the right. I am using bootstrap with less to style the navbar, but I am having trouble.
I have searched Stack overflow looking for ways to make this work, like this question, but the solutions there aren't working for me. I can't seem to get my image to line up so that its horizontal axis is centered with the dropdown menu, collapsable item, and navbar container. When I try the solutions like in the previously mentioned link, taking the image out of the flow of the page by maxing its position fixed, it always appears below the navigation bar. I can fix this for my screen by messing with the CSS attributes, but as soon as I resize the window things look awful.
Is there a way (possibly using less) to style the bootstrap navbar so that no matter what the size of the window is, I have an item on the left, image in center, and item on the right, all sharing a common horizontal center axis with the navbar?
EDIT
Okay, so I have changed my mind and decided to just add some links on the left, an image in the center still, and some links on the right. When the screen gets smaller, I want the links to collapse to the right offering a toggle button for a menu. The collapsing is working fine, but when the links are on the screen I want them to be horizontally centered in the nav bar, along with the image. The image right now is partially in the nav bar and partially out. I also want the image to slide to the left when the links collapse at smaller screen sizes. Here is my code right now:
Just a note that I am using django to serve the html, hence the syntax for the image src.
#logo-with-slogan {
max-width: 35%;
padding: 3% 0 3% 0;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
<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>
<a class="navbar-brand" href="#">
<img id="logo-with-slogan" src="{% static " img/LogoWslogan.jpg " %}" />
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Item One</li>
<li>Item Two</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li>Login</li>
</ul>
</div>
</nav>
So you're looking to do something like this, with the image fitted:
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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand navbar-center" href="#">
<img src="http://placehold.it/100x40" alt="Logo Here">
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Item One</li>
<li>Item Two</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li>Login</li>
</ul>
</div>
</nav>
CSS
.navbar-brand {
float: none;
padding: 5px;
}
.navbar-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:100%;
}
Demo: JSFiddle
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Navbar bootstrap</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
Navigation bar is coolest component of bootstrap, you can easily create cool responsive navigation header for your website.
For information and detail please see this article..
steps to create navbar in bootstrap
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#testNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo / SiteName</a>
</div>
<div class="collapse navbar-collapse" id="testNavBar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</nav>
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.