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/
Related
i have navbar with two menu, want to center menu icon and text but i dont't find the class to used.
how can i do it ?
im sorry for my bad english
here my code
<body class="text-center">
<div class="bg-login">
<div class="container">
<nav class="navbar navbar-dark sticky-top h-100">
<ul class="nav navbar-nav ml-auto nav-fill">
<li class="navbar-item">
<a class="navbar-brand" href="#" id="navlink">
<span data-feather="globe"></span>
EN-US
</a>
</li>
<li class="navbar-item">
<a class="navbar-brand" href="#">
<span data-feather="globe"></span>
en-uk
</a>
</li>
</ul>
</nav>
</div>
</div>
<script type="text/javascript">
feather.replace()
</script>
</body>
jsfiddle : https://jsfiddle.net/lexavey/jywL5ves/12/
im use
<ul class="nav navbar-nav ml-auto nav-fill">
because i want navigation i right side like this https://prnt.sc/wb1d3s
my problem is center verticaly https://prnt.sc/wb1hp1
add flex classes to the container div
<div class="container d-flex justify-content-center">
You can use these classes in Nav elements
<a class="navbar-brand d-flex align-items-center" href="#" id="navlink">
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
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>
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;
}
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.