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>
Related
In the output below I can't see my navbar menu correctly. Where is the problem?
Please anyone help me.
I just changed my code bootstrap.css and make this line comment the line name: padding-bottom.
<nav class="navbar navbar-inverse" style="height:120px;">
<div class="container" style="padding-top:30px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a><img class="pull-left" src="images/mt-626_header_logo01.png"></a>
<a class="navbar-brand" href="#"><strong style="color:white">SOFT</strong><strong style="color:#3EC7C2">APP</strong></a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>BLOG</li>
<li>CONTACTS</li>
</ul>
</div>
</div>
</nav>
<!-- First Container -->
<div class="container-fluid fcontaner">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<img src="images/mt-0626-img.png" style="height:100%;width:100%"/>
</div>
<div class="col-md-6">
<h1 style="padding-top:150px"><strong style="color:white;">SOFT</strong><strong style="color:">APP</strong></h1>
<h1>INNOVATIVE SOLUTIONS</h1>
<h3 style="color:white;padding-bottom:50px;">Innovative solutions delivering a product, which <br>includes tomorrow’s technology – already today!</h3>
<img src="images/mt-0626-img2.png">
</div>
</div>
</div>
</div>
You can remove the height from the <nav class="navbar navbar-inverse" style="height:120px;"> if you want as suggested by Ismail.
But if you really want your nav to have a default height, then instead of height you can give min-height as <nav class="navbar navbar-inverse" style="min-height:120px;"> and it will work. Your nav will expand as the content in it increases in height.
Demo:http://www.bootply.com/0JiOM9OxYW
Remove the height and padding-top css.
You have added inline style here <nav class="navbar navbar-inverse" style="height:120px;"> just remove it your problem will solve.
See Demo
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>
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 am using a nav-bar on my page with following code
<nav class="navbar navbar-default navbar-lower" role="navigation">
<div class="container">
<div class="container collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
It works fine and just like i want it to except for its width when i scroll.
I want its width to be same as the width of my body tag on that page but when i scroll it adds a little extra width on the right.
Look at the screenshots below for more clear understanding
I tried changing the container class and adding it to <nav class="container"... but that doesn't fix it.
Here is a fiddle showing the navbar never adds width Fiddle
<div class="container">
<div class="row">
<nav class="navbar navbar-default navbar-lower" role="navigation">
<div class="container">
<div class="container collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
And if you want to add width you need to do the following
Your need to add class when you scroll
set your original nav class to have a margin and set it outside of the container and then set your scrolled to to not have the margin
<nav class="navbar navbar-default navbar-lower" role="navigation">
<div class="container">
<div class="container collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
Then add
<script>
$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop() > 1);
});
</script>
I had downloaded a bootstrap template which has a dropdown menu in middle(mobile version).
Like this:
http://postimg.org/image/58hmpb8f5/
But i want dropdown menu on the top-right corner of my mobile screen
Like this : http://postimg.org/image/5fkeraou1/
This is my html code so far:
<header id ="top" class="mTop">
<div class="topHead">
<div class="container">
<div class="row">
<div class="topMenu">
<ul class="span12 topContact">
<li class="addresTop"><span class="icon-map-marker"></span>456 Jl.Pacar, Singapore</li>
<li class="mailTop"><span class="icon-envelope"></span>Office#Plasma.com</li>
<li class="phoneTop"><span class="icon-phone"></span>(+1) 321-9876520</li>
</ul>
</div>
</div>
</div>
</div>
<div class="headContent">
<div class="container">
<div class="row">
<div class="span4">
<div class="brand">
<img src="images/logo.png" alt="Logo">
</div>
</div>
<div class="span8">
<div class="menu" id="steak">
<nav>
<ul class="navMenu inline-list" id="nav">
<li class="current">Home</li>
<li>About</li>
<li>Service</li>
<li>Our Team</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="clearfix"></div>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
dont you want to use the latest boostrap instead? the latest bootstrap which is 3.3.1 has the navigation that you need.
code in bs3.3.1 is something like this
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
for bootstrap 2, the basic navigation where in you will have a top right menu in mobile view will be
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
</div>
</div>
</div>