How can I align a bootstrap navbar brand vertically? - html

The brand is centered until i change it to an img.
I have tried many different ways of fixing it in css, but it wont work.
How can i vertically align this logo? and why doesnt my css work? For some reason, not all of my css styles are being applied.
<!DOCTYPE html>
<html>
<head>
<title>Stuff</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="app.css" >
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img id="logo" alt="Brand" src="images/logo.jpg" width="40px" height="40px">
</a>
</div>
<div>
<div class="container" id="mynav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
css:
#mynav
{
width: 80%;
}
#logo
{
width:50px;
height: 50px;
vertical-align: middle;
}


You should only need one .navbar-header div, just place the .navbar-brand into your standard .navbar-header and adjust the padding for the .navbar-brand class.
.navbar .navbar-brand {
padding-top: 5px;
}
Working Example:
.navbar .navbar-brand {
padding-top: 5px;
}
.navbar .navbar-brand img {
height: 40px;
width: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Brand" src="https://unsplash.it/40/40/?random">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Related

Add a logo into bootstrap navbar right side

i want to add a logo to the right side of the bootstrap navbar. Added it using navbar-right class. but it doesn't resize within the size of the navbar. So added some css but now it is displayed in the left side after external css. Also is there a way to increase the height of the navbar without losing responsiveness? code is as follows.
#logofpin {
max-width: 5%;
max-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li class="dropdown">
Products <span class="caret"></span>
<ul class="dropdown-menu">
<li>Risk Engine</li>
<li>Analytics</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<img alt="Forestpin logo" src="assets/images/logofpin.png" id="logofpin">
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Try adding pull-left and pull-right css and form html as like below snippet.
.log-img {
max-height: 100%;
}
.p0 {
padding: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="https://www.w3schools.com/cssref/w3css.gif" class="img-responsive log-img">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li class="dropdown">
Products <span class="caret"></span>
<ul class="dropdown-menu">
<li>Risk Engine</li>
<li>Analytics</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

bootstrap - navbar - exchange brand and toggle

I would like to switch the brand and the toggle button in mobile view if the viewport is small enough. On desktop viewport the brand icons shall be on the right side and the links shall be displayed normaly.
Examples:
Desktop:
+--------------------------------------------+
|Link1 Link2 BrandIcon1 BrandIcon2 |
+--------------------------------------------+
Mobile:
+----------------------------+
|[=] BrandIcon1 BrandIcon2 |
+----------------------------+
What is the easiest and cleanest way to code this?
Made a Pen: http://codepen.io/Kaito23/pen/Wxmxgm
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.navbar-toggle {
float:left;
}
.navbar-brand {
float: right;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
<ul class="visible-xs visible-xs visible-sm visible-md visible-lg nav navbar-nav navbar-right">
<li><img src="http://images.fatcow.com/icons/32/wordpress.png" /></li>
<li><img src="http://www.wbdesignideas.com/images_drf_color.png" /></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Currently the problem is that when the icons are in the navbar-collapse class they disapear. If I put them under the collapse div, they are in a
new row.
Thanks in advance
Greetings
Kaito

Let's take Bootstrap's default navbar and remove unnecessary parts.
Then change floats to the opposite direction.
And add second brand before the first one. (It's because of the float: right; property.)
Please check the result: http://codepen.io/glebkema/pen/PzLbmz
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (min-width: 768px) {
.navbar-header {
float: right;
}
}
.navbar-brand {
float: right;
}
.navbar-toggle {
float: left;
margin-left: 15px;
margin-right: 0;
}
<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-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand 2</a>
<a class="navbar-brand" href="#">Brand 1</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Left 1</li>
<li>Left 2</li>
<li>Left 3</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

How to remove background color in hover and change it to underline but with space between text and line in Bootstrap?

Thank you for reading and answering my question. What I would like to do is have my links underlined once it is hovered. Without background color and with space between text. Sort of something like this using bootstrap. enter image description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internship Exercise 1</title>
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body><!--Navbar start-->
<nav id="myNavbar" class="navbar navbar-default navbar-default navbar-static-top navpadding" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.jpg" alt="logo" width="90%"></a>
</div>
<div class="collapse navbar-collapse navmargin" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
With CSS here that have a temporary underline for active. How can I do this for hover? Looking forward to your answer. Thanks!
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.underline {
border-bottom: solid 1px #ffffff;
display: inline;
padding-bottom: 2px;
}

Well that's why :hover exists :)
HTML:
<body><!--Navbar start-->
<nav id="myNavbar" class="navbar navbar-default navbar-default navbar-static-top navpadding" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg" alt="logo" height="100%"></a>
</div>
<div class="collapse navbar-collapse navmargin" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
CSS:
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar{
background:pink!important;
padding:10px;
}
.navbar li *:hover{
color:red!important;
}
.navbar li:hover{
border-bottom:3px solid white;
}
Here is a working fiddle: https://jsfiddle.net/dp17vjus/

Bootstrap navbar with collapsed menu icon - How to?

On this bootstrap starter template:
when the browser gets narrow the navigation bar links/buttons collapse into one icon in top-right corner like this:
I would like to have this collapsed "icon" as default like on the picture above. So that the navbar links are available after the user clicks that top-right collapsed button.
How to do that?
This is the source code of the template:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->

It's all in the CSS.
See this post and check out the css column.
Always Collapse Bootstrap Nav
Working Example:
.navbar .navbar-header {
float: none;
}
.navbar .navbar-toggle {
display: block;
}
.navbar .navbar-collapse.collapse {
display: none!important;
}
.navbar .navbar-nav {
float: none!important;
}
.navbar .navbar-nav > li {
float: none;
}
.navbar .navbar-collapse.collapse.in {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
<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 class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</nav>

Bootstrap menu is not pushing down the content

Please pardon my ignorance, I am new to bootstrap. I have this code that I need to correct, and I can't figure out why the menu is not pushing the rest of the content down on click. Here are the HTML and CSS Code snippets
*:before,
*:after {
box-sizing: border-box;
}
.navbar-default .navbar-toggle {
border-color: #ddd;
}
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 8px;
padding: 9px 10px;
position: relative;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img alt="Harbor Real Estate" src="img/logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse in" aria-expanded="true" style="">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Buy
</li>
<li>Rent
</li>
<li>Landlords
</li>
<li>Property Management
</li>
</ul>
</div>
<!-- /navbar-collapse -->
</div>
<!-- /container-fluid -->
</nav>
</div>
</div>

I had similar problem and found that it was due to setting a fixed height to the header tag which contains my navbar.
I fixed it by placing that particular CSS in a media query so it only applied to larger screens.

I think it does push your content downwards see my example below.
I've changed the code in your question into a code snippet and added jQuery and Bootstrap's CSS and JavaScript. As the collapsing behaviour of the navbar is dependent on jQuery and Bootstrap's JavaScript perhaps that was missing.
Two additional things:
I've removed the class in from the <div id="bs-example-navbar-collapse-1" ... to make the navbar be collapsed by default
I've removed the outer .row and .col-md-12 as they aren't needed
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img alt="Harbor Real Estate" src="img/logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse" aria-expanded="true" style="">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Buy
</li>
<li>Rent
</li>
<li>Landlords
</li>
<li>Property Management
</li>
</ul>
</div>
<!-- /navbar-collapse -->
</div>
<!-- /container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-xs-12">Content</div>
</div>
</div>

Muhammad Hasham. Try this! Works.
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="row">
<div class="col-md-12">
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img alt="Harbor Real Estate" src="img/logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse" aria-expanded="true">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Buy
</li>
<li>Rent
</li>
<li>Landlords
</li>
<li>Property Management
</li>
</ul>
</div>
<!-- /navbar-collapse -->
</div>
<!-- /container-fluid -->
</nav>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>

You can add main j-query.
jquery-1.11.1.min.js
In Your code to work this menu