I am trying to change the image in my naviation to a larger size.
However by doing this the navbar get's malformed.
I have the code over here: http://www.bootply.com/941lMP3fj6#
The problem might be that the image is in an anchor tag. But not sure.
Try:
.navbar-brand
{
padding-top: 0;
}
Working: http://www.bootply.com/cCg5FvZyZP
Add this to your styles:
.navbar-brand
{
margin: 0;
padding: 0;
{
.navbar-brand img
{
max-height: 100%;
}
http://www.bootply.com/rAzwwIbCBI
You need to adjust the height of the navbar.
You can use this variable in LESS to adjust the height and it will center the navbar vertically and include all necessary padding:
#navbar-height
50px is the default.
How to adjust this in regular CSS is to change the min-height of .navbar and the height of navbar-fixed-top and then adjust padding of .navbar-nav.
This is how the top part should be structured (missing navbar-header):
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="/" title="www.site.nl">
<img src="//placehold.it/200x51">
</a>
</div>
Example Bootply: http://www.bootply.com/tOoeM8o8Om
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar navbar-collapse collapse navbar-responsive-collapse">
<div class="pull-left" style="margin-right: 15px;">
<a rel="home" href="/" title="www.site.nl">
<img src="//placehold.it/200x51">
</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Link 1</li>
<li>Link 2</li>
</ul> <!-- end nav-->
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<strong class="caret"></strong> Select language
<ul class="dropdown-menu dropdown-menu-right">
<li>NL</li>
<li>IL</li>
<li>ENG</li>
</ul>
</li>
</ul> <!-- end nav menu right -->
</div> <!-- end nav-collapse -->
</div>
Put your logo inside the container.
The above code works!!
Check and let me know if you have any issues!!
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
Navbar how it should be:
I want the text idealize, develop, prototype and about to appear next to the icons only in the collapsable navbar. The text appears on larger viewport sizes, too, what I don't want:
HTML
<nav class="navbar navbar-inverse navbar-fixed-top">
<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" id="logo" href="#">
<img src="images/avezlogo.png">
</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li id="orange"><a href="#idealize">
<img src="images/bulb.png"><span class="collapse">idealize</span>
</a></li>
<li id="cyan"><a href="#develop">
<img src="images/laptop.png"><span class="tittle">develop</span>
</a></li>
<li id="purple"><a href="#prototype">
<img src="images/printer.png"><span class="tittle">prototype</span>
</a></li>
<li id="red" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#about">
<img src="images/dots.png" id="dots"><span class="tittle">about</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Sorry about any noob mistakes on my code. I'm new to Bootstrap and web design. Any help is appreciated. Thanks!
You can use display: none; inside of a media query to target and hide your images at the mobile breakpoint. See example.
#media (min-width: 768px) {
.navbar-inverse .navbar-nav li img {
display: 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-fixed-top">
<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" id="logo" href="#">
<img src="images/avezlogo.png">
</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li id="orange">
<a href="#idealize">
<img src="images/bulb.png"><span class="collapse"> idealize</span>
</a>
</li>
<li id="cyan">
<a href="#develop">
<img src="images/laptop.png"><span class="tittle"> develop</span>
</a>
</li>
<li id="purple">
<a href="#prototype">
<img src="images/printer.png"><span class="tittle"> prototype</span>
</a>
</li>
<li id="red" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#about">
<img src="images/dots.png" id="dots"><span class="tittle"> about</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
That's how it should behave. Links should be seen in all viewport sizes. If you only want to see the links in the collapsable navbar and not in the not-collapsable navbar, you can do this:
#media (min-width: 768px) {
#myNavbar .navbar-right {
display: none;
}
But then you see in larger viewport sizes a blank navbar without a toggle icon on the right side. And that's not what you want, I think.
If you want a collapsable navbar all the time, the best solution would be to customize the Bootstrap CSS here:
Bootstrap customize grid
and set the #grid-float-breakpoint to a large width, e.g. 3000px. Download and compile and the CSS should do it.
the media query worked fine. Thanks a lot. I was also wondering. Why doesn't the dropdown menu in the first image close after clicking one of the links? I have to click the menu button again for it to close. How could I change this? Thanks again.
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>
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.