Already try other solutions from this community, but nothing seams to work!!
I want to horizontally center the menu. The "logo" is left align on top of it.
Here is the code (no changes to css that matter to this):
<nav class="navbar navbar-default navbar-fixed-top">
<div class="col-lg-2">
</div>
<div class="col-lg-8">
<img class="logo" src="images/logo.png" />
<ul class="nav nav-pills">
<li>
<a href="#"><img src="images/menu/123.png" />
</a>
</li>
<li>
<a href="#"><img src="images/menu/456.png" />
</a>
</li>
<li>
<a href="#"><img src="images/menu/789.png" />
</a>
</li>
</ul>
</div>
<div class="col-lg-2">
</div>
</nav>
Edit: This solved the problem
ul {
width: 825px;
margin: auto;
}
Try changing this <div class="col-lg-8"> to this <div class="col-lg-8 col-lg-push-2 center-block">
Get rid of the two empty <div class="col-lg-2">
Try out this codes,
Bootstrap Centered Navigation
Bootstrap Centered Menu
well, solved:
ul {
width: 825px;
margin: auto;
}
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;}
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>
On the left side is my brandname.
I try to center the text and the icons in the navbar. But it is allwys to the left of the brandname.
<div class="navbar navbar-fixed-top hidden-sm hidden-xs">
<div class="navbar-inner">
<div style="" class="container-fluid navi">
<div class="navbar-header">
<p class="navbar-brand brand">Lapsy</p>
</div>
<div>
<ul class="nav navbar-nav navbar-center">
<li>Follow us</li>
<li><img src="img/f.png" alt="Facebook Fanpage" class="img-responsive"> </li>
<li><img src="img/t.png" alt="Twitter Fanpage" class="img-responsive"> </li>
</ul>
</div>
</div>
</div>
</div>
Give text-align:center to class navbar-inner and give text-align:left to your Brand Name. Note I gave display:inline property to ul li to put them in a single line. You can see the result here. http://jsfiddle.net/5t5sfx5h/
I am not able to align the logo and the nav bar inside the container div. The navigation bar is always below the level of the image logo. I have tried some html align attributes but it did not fix the issue. I am using bootstrap CSS, so should I change something in there ?
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!--company logo and slogan-->
<img src="img/logo.png" alt="logo" />
<!--button for responsive navigation-->
...
<!--Nav bar-->
<div class="nav-collapse collapse">
<ul class="nav pull-right" >
...
</ul>
</div>
</div>
</div>
</div>
You could try to float left your img and your div tag as follow :
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="overflow: auto; ">
<!--company logo and slogan-->
<img src="img/logo.png" style="float: left; " alt="logo" />
<!--Nav bar-->
<div class="nav-collapse collapse" style="float: left; ">
<ul class="nav pull-right" >
...
</ul>
</div>
</div>
</div>
</div>
</header>
That should make them show at the same level.
I am trying to insert an image above a navbar, but I it is not working for me. Here is my html:
<div class="wrapper" />
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a class="brand" href="#">Home</a>
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
and my css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 250px;
}
Anytime I add a div or any content, it is pushed to the top of the page. I can add padding, but when I start to resize the screen it breaks and leaves a gap in the image and the navbar. Any help would be great.
<div /> means <div> in HTML 5 and not <div></div> as it does in XHTML. Div's are not valid self closing tags.
Ref
Demo
<div class="wrapper"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a class="brand" href="#">Home</a>
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
The issue is /> at the end of .wrapper, because it is not allowed (depending on your doctype). Remove it and give it </div> like the other divs, I think it's going to work.