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;
}
Related
Trying to fit an image to the navbar I'm using. I can not get it to work in CSS but I can get it to work in HTML. I do not want to style the logo in HTML, only in CSS.
The image is "RPGWizards.jp"
This is the html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="logo" href="#"><img src="Assets/RPGWizards.jpg"></a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Our Products</li>
</ul>
</div>
</nav>
This is the CSS
#logo{
width= 42px ;
height= 42px;
}
/NTqjn.jpg
You have used is an incorrect syntax for width: 48px; there is colon in between not = symbol.
The class nav-brand has a padding and you need to make it to 0 and fit it to the block.
View in full screen for visualization.
a#logo.navbar-brand {
padding: 0;
}
#logo img {
width: 48px;
height: 51px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="logo" href="#"><img src="http://placekitten.com/301/301"></a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Our Products</li>
</ul>
</div>
</nav>
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>
Using Bootstrap to create a menu bar. My brand label is aligned far left. The main menu options are center aligned. I'm trying to get 'Logout' to be right aligned. But instead, its on a second line and centered.
<style>
body {
background-color: White;
margin-left: 40px;
margin-right: 40px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar .navbar-right {
text-align: right;
display: inline-block;
float: none;
vertical-align: top;
}
</style>
<body id=<?php echo $bodyid ?>>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand">Assessment Manager</a>
</div>
<div class="collapse navbar-collapse">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Clients</li>
<li>Contacts</li>
<li>Employees</li>
<li>Findings</li>
<li>Projects</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Vulnerabilities<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Host</li>
<li>Web</li>
</ul>
</li>
</ul>
</div>
<div class="container">
<ul class="nav navbar-nav">
<li>
<span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div>
</div>
See a picture of the menu bar here.
Put your <ul> elements in the same container. Also you have a CSS class navbar-right that wasn't used in your HTML. This HTML seems to work fine given a wide enough browser window:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand">Assessment Manager</a>
</div>
<div class="collapse navbar-collapse">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Clients</li>
<li>Contacts</li>
<li>Employees</li>
<li>Findings</li>
<li>Projects</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Vulnerabilities<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Host</li>
<li>Web</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div>
</div>
</div>
You could also experiment with float:right; on the <ul> for your login link (using the same navbar-right class.
Also, keep in mind that bootstrap intends for the container class to have row and col classes inside it to further wrap the content. By using only container you're missing out on a lot of the responsive behavior bootstrap is intended to provide.
I want to make something like this
When I made 2 navbar, there is a white gap separating them, how to remove this gap?
I've read somewhere that if I change the size of the navbar's elements will automatically increase its height , but it didn't work out.
If I need to make a custom class for a navbar, what properties should I change?
edit :
<nav class ="navbar topNavbar">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login </li>
<li><span class="glyphicon glyphicon-user"></span> Sign Up </li>
</ul>
</div>
</nav>
<nav class="navbar botNavbar">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="">Website name</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Collections</li>
<li>About Us</li>
</ul>
</div>
</div>
</nav>
<style>
.topNavbar {
background-color: #F60;
}
.botNavbar {
background-color : #F90;
}
</style>
Bootstraps .navbar has a 20px bottom margin by default.
So you could do:
.topNavbar {
background-color: #F60;
margin-bottom: 0;
}
Bootply