I'm making the navbar of my Website with the following code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<img src="images/logo.png" class="img-circle">
</div>
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li> Liens </li>
<li> Login </li>
<li> Signup </li>
</ul>
</div>
</nav>
The problem is that the logo image is big (225x225 pixels), and I would like to set it to the default size of the navbar. But the opposite happens, i.e the navbar adapts to the size of the logo (and becomes very big).
I did not find any feature in bootstrap to do this ? Any idea ?
Thank you
navbar-fixed-top has a fixed height 50px, so you can directly style an image by setting e.g. max-height: 40px to it and margin: 5px to center image.
.navbar-header img {
height: 40px;
margin: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<img src="http://lorempixel.com/225/225" class="img-circle">
</div>
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li> Liens </li>
<li> Login </li>
<li> Signup </li>
</ul>
</div>
</nav>
I had the same problem sometime back and this is what I did . Hope this works for you
.brand{
max-height: 30px;
}
<a href="link/location/here" class="img-circle">
<img class="brand" src="img/logo.png">
</a>
Related
I am trying to create Navbar for the website with two rows and margin-top: 0 for the top row. This code works but couldn't align the top row with zero margin.
---------------------------------------------------------------------
icon-image(small icon) slogan(text)
Site Logo company name
----------------------------------------------------------------------
Code.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<nav class="navbar-inverse nav-upper">
<div class="container-fluid">
<ul class="nav navbar-upper">
<li>
<a class="navbar-brand" href="#">
<span><img src="~/lib/images/icn.png" /></span>
website slogan
</a>
</li>
</ul>
</div>
</nav>
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span><img src="~/lib/images/_image1.png" /></span>
Company Name
</a>
</div>
</div>
</div>
CSS
.nav-upper ul.navbar-upper li {
margin-top: 0;
}
Is it something like that you want ?
Bootply : https://www.bootply.com/N7NZzIDoVm
Css :
.nav-upper ul.navbar-upper li {
margin-top: 0;
}
.nav-upper > div {padding:0;}
Before Start, I have searched for the last few hours, found several replies but none that fixed this issue.
I only have one link, and I have a fixed to top navbar. I want the Link to stay on the same line as the Brand in mobile/smaller screens.
Right now on mobile (Ref image below):
I have tried floating it right to see if that helped, but it didn't.
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a></div>
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li class="active">1 Link Only<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-collapse.collapse {
display: inline-block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
You only need to delete collapse navbar-collapse classes and use a custom class. You can name it custom-navbar-nav. Finally, add the CSS showed here. If you definitely want your link on the top, you need to use media queries.
.navbar-header {
display: inline-block;
}
.custom-navbar-nav {
display: inline-block;
float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a></div>
<div class="custom-navbar-nav">
<ul class="nav navbar-nav">
<li class="active">1 Link Only<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
I am trying to create a navbar with 100% width in bootstrap but it's not working.
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"> WebsiteName </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
Remove padding in container-fluid, create class "custom-nav-container" to overwrite.
<div class="container-fluid custom-nav-container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"> WebsiteName </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
.custom-nav-container{
padding-left: 0px !important;
padding-right: 0px !important;
}
Replace
<div class="container-">
To
<div class="container-fluid">
Inside your tag. Your problem solved. Thank you.
.container has one fixed width for each screen size in bootstrap (xs,sm,md,lg). It is responsive; however, it is fixed based on screen size. .container-fluid expands to fill the available width. If you use the container-fluid and resize the browser, you may notice the content inside it will adjust with every pixel to take the full available width.
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"> WebsiteName </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
I'm new to Web Development, and i've written the following code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="https://in.linkedin.com/in/debdebashis" target="_blank">Debashis Deb</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About Me
</li>
<li>Skills
</li>
<li>Interests
</li>
<li>Contact Me
</li>
<li>
<a> </a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid first">
<p>Welcome to my Page, Here you can find most of the informations related to me</p>
</div>
The problem that I'm facing is that, my last div is not getting displayed in the page. What mistake am I doing ?
On a fixed navbar you have to add a padding to the <body> of your site:
From the Bootstrap Documentation:
The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
Make sure to include this after the core Bootstrap CSS.
http://getbootstrap.com/components/#callout-navbar-fixed-top-padding
body {
padding-top: 70px;
}
See the following snippet (little changes to support the responsive navbar too): https://jsfiddle.net/17mmmxps/1/
I have created a navigation with Bootstrap's CSS. It was working great until I added images (logo & award logos). The 3 images I added are 471x249, 251x117 & 275x300 and when I look at the navigation the images are massive. I noticed this line:
.nav>li>a>img {
max-width: none;
}
I tried playing around with the max-width and that just makes it look worse.
Here is the full nav:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<a href="#" class="navbar-brand">
<img src="http://2014violadepc.en.ecplaza.net/logo.jpg" />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Communities
</li>
<li>Pronto
</li>
<li>Gallery
</li>
<li>Virtual Tours
</li>
<li>Design Centre
</li>
<li>Customer Care
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<img src="http://itg-instructor-training.co.uk/Images/images/images/banner_01_01.png" />
</a>
</li>
<li>
<a href="#">
<img src="http://arabbrains.com/wp-content/uploads/2013/03/emc-logo1-275x300.jpg" />
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
Any suggestions to fix this issue with images?
You are trying to assign a max-width property without specifying the height.
Just change this line:
<img src="images/logo.jpg" />
to this
<img class="img-responsive" src="images/logo.jpg" alt="" />
and change those max-width properties you edited earlier back to their original values and it should work fine.
Now the image size will be valued (while maintaining aspect ratio) according to the height of the navbar-header.
---- UPDATE ----
I checked your fiddle and noticed a certain class where you wrote collapse instead of toggled. I have also set a max-height property for your images which you can change accordingly.
Here is a jsfiddle: http://jsfiddle.net/AndrewL32/z08oyjva/
Try setting the width of the images to 100%:
.navbar-brand img {
width: 100%;
}