i want to add my image inside my navbar-header so that it adjusts alongside the header links. however since the size of the image is larger it increases and leaves spaces on the other header links. how do i keep the links centered?
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header logo">
<img src="img/logo_png_solo.png">
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>Membership</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Login</li>
</ul>
</div>
</nav>
NO IMAGE:
WITH IMAGE:
Try using navbar-brand
<a class="navbar-brand" href="#" style="color:#FFF">
<img src="img/logo_png_solo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Your name
</a>
That's because your logo doesn't have padding, but the texts in the navbar have. just give padding between 10-15 px to the div containing the image
Related
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 followed the bootstrap way to build a navbar and a footer, but i am having some troubles with the navbar, i want to place an image that is my logo inside the navbar at the begining in the left, but the logo does not fit the column. I don't know why.
here is my code:
<header>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-left">
<img src="img/logo1.png" class="img img-responsive" alt="">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</header>
Image:
i tried to add this css:
.navbar-brand
{
margin: 0;
padding: 0;
}
.navbar-brand img
{
max-height: 100%;
}
but then my image get to small, if i want to increase the size of the image the image stretch, i just want the image to maintain the size ratio, and fit the left side of the navbar, what is wrong here?
bootply
Put navbar-brand outside of navbar-nav
<header>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="img/logo1.png" class="img img-responsive" alt="">
</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</header>
More Info
You can try this..
.navbar-brand
{
padding-left:20px;
z-index:999;
position:relative;
}
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 am creating a navbar with Bootstrap, the problem is when I try to put two or more images in the right navigation bar, the height of the bar increases how can i fix it? Thanks!!
<ul class="nav navbar-nav navbar-right">
<li><a href="http://www.youtube.es/"><img src="IMAGENES/youtube.png"/></li>
<li><a href="http://www.twitter.es/"><img src="IMAGENES/twitter.png"/></li>
<li><a href="http://www.facebook.es/"><img src="IMAGENES/facebook.png"/></li>
</ul>
Try like this: Demo
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left"> <a class="navbar-brand" href="index.php">xxx</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><img src="IMAGENES/youtube.png"/>
</li>
<li><img src="IMAGENES/twitter.png"/>
</li>
<li><img src="IMAGENES/facebook.png"/>
</li>
</ul>
You didn't closed <a> tags .. Check all the tags were closed properly or not..
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%;
}