Centering navbar buttons in bootstrap - html

I'm trying to get my hands onto some web designing and I was not able to figure out how to make the navigation buttons in my project centered. I would like the buttons from Home to Page 3 centered and was wondering if there was a simple way to do that in the HTML file alone without needing a separate CSS class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>


Make some changes in Bootstrap.CSS
May be like this...
.nav navbar-nav
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
Check here => bootply


The only way you can accomplish this is by adjusting some CSS properties. Basically remove the float from navbar-nav and center the text. But if you really want them to be centered, you have to account for the navbar-brand class by assigning it a width and adding a negative margin equal to half that width to the navbar-nav.
See working Example Snippets.
#media (min-width: 768px) {
.navbar.navbar-default {
height: 50px;
}
.navbar.navbar-default .container-fluid,
.navbar.navbar-default .container {
text-align: center;
}
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
margin-left: -75px;
}
.navbar.navbar-default .navbar-brand {
width: 150px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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-nav" 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="#">Website Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<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>
Mobile Center
.navbar.navbar-default .container-fluid,
.navbar.navbar-default .container {
text-align: center;
}
#media (min-width: 768px) {
.navbar.navbar-default {
height: 50px;
}
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
margin-left: -75px;
}
.navbar.navbar-default .navbar-brand {
width: 150px;
}
}
#media (max-width: 767px) {
.navbar-default .navbar-brand.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 150px;
text-align: center;
top: 0;
}
.navbar.navbar-default > .container .navbar-brand.navbar-brand-centered,
.navbar.navbar-default > .container-fluid .navbar-brand.navbar-brand-centered {
margin-left: -75px;
margin-top: 0;
margin-bottom: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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-nav" 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 navbar-brand-centered" href="#">Website Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<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>


Using this css will get your navigation button in center position.
navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
DEMO

Related

Creating a Full screen Overlay Navigation

I am trying to get a full screen navigation overlay to work on iPad sizes etc. I'm using bootstrap 3, and what I want is when the user gets the burger menu, and they click it, it will cause a full screen overlay such as this example:
Here Link
I for some reason cant get it to work on my code and I am wondering if its because of my bootstrap classes or what?
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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 navbar-fixed-top " id="section1">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About Me
</li>
<li>
Skills
</li>
<li>
Me
</li>
<li>
Hobbies
</li>
<li>
Contact Me
</li>
</ul>
</div>
</div>
</nav>
I was wondering if anyone can help me get this to work when it goes to iPad sizes on 768 screens.

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link href="css/style.css" rel="stylesheet">
<style>
.overlay {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top " id="section1">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img alt="" src="Images/logo.png" class="img-responsive">
</a>
</div>
<div class="collapse navbar-collapse overlay" id="myNavbar">
×
<ul class="nav navbar-nav navbar-right overlay-content">
<li>
Home
</li>
<li>
About Me
</li>
<li>
Skills
</li>
<li>
Me
</li>
<li>
Hobbies
</li>
<li>
Contact Me
</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$("button").on("click", function () {
$("#myNavbar").css("height", "100%");
});
$("#myNavbar a").on("click", function () {
$("#myNavbar").css("height", "0%");
})
</script>
</body>
</html>
Try this saving as a HTML File and link bootstrap files properly. The thing you were missing was overlays. I used the same overlays from your link.

Navbar above a slider

I'm building a website at the moment, and have a problem with the nav bar.
I have a slider, and I want the navbar to be above a slider. However, my nav is pushing down the slider. The navbar should be above the slider images, with transparency, so I can see the navbar and the image behind it.
I'm using bootstrap and changing some styles, to make the elements look as I want them to look.
Here is the HTML and CSS, what should I change or add?
$(document).ready(function() {
$('.intro-slider').slick {
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
slidesToShow: 1,
adaptiveHeight: false
});
});
.intro-slider {
width: 100%;
height: 1080px;
overflow: hidden;
padding: 0;
}
.navbar-default,
.container-fluid,
.navbar-default .navbar-collapse,
.navbar-default .navbar-form,
.navbar-collapse.collapse,
.navbar navbar-default {
background-color: #000;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: 0px;
}
hr {
margin-top: 0px;
margin-bottom: 0px;
border: 0;
border-top: 1px solid #2f2f2f;
}
img {
max-width: 600px;
height: auto;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<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"/>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<body>
<div style="" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navfont2">
<p><i class="fa fa-phone-square" aria-hidden="true"></i> +1 809 974 7826</p>
</li>
<li class="navfont2">
<p><i class="fa fa-envelope" aria-hidden="true"></i> orestes#mintech.do</p>
</li>
</ul>
</div>
<hr>
<!-- navbar start -->
<nav class="navbar navbar-default">
<div style="" class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div style="" 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 style="width: 175px;" src="images/mintech.png"></a>
</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 navbar-right">
<li class="navfont">Inicio</li>
<li class="navfont">Nosotros</li>
<li class="navfont">Servicios</li>
<li class="navfont">Proyectos</li>
<li class="navfont">Equipo</li>
<li class="navfont">Contacto</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- navbar end -->
<div class="intro-slider col-xs-12">
<div><img src="https://www.almanac.com/sites/default/files/birth_month_flowers-primary-1920x1280px_pixabay.jpg"></div>
<div><img src="http://balconygardenweb.com/wp-content/uploads/2015/08/most-poisonous-flowers-3_mini.jpg"></div>
<div><img src="http://data.whicdn.com/images/57613434/large.jpg"></div>
</div>

You can absolutely position your navbar above your slider. I had to use relative positioning too to push the slider up a bit. All my code is commented to help you follow. Lastly I made the navbar transparent.
$(document).ready(function() {
$('.intro-slider').slick {
dots: false,
arrows: false,
autoplay: true,
autoplaySpeed: 2000,
infinite: true,
slidesToShow: 1,
adaptiveHeight: false
});
});
.intro-slider {
width: 100%;
height: 1080px;
overflow: hidden;
padding: 0;
}
.navbar-default,
.container-fluid,
.navbar-default .navbar-collapse,
.navbar-default .navbar-form,
.navbar-collapse.collapse,
.navbar navbar-default {
background-color: #000;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: 0px;
}
hr {
margin-top: 0px;
margin-bottom: 0px;
border: 0;
border-top: 1px solid #2f2f2f;
}
img {
max-width: 600px;
height: auto;
}
/* \\\\\\\\\\\\\\\\\\\\\\\\ new styles below ///////////////////////////// */
hr {
display: none; /* margins on hr were pushing gallery down */
}
body .navbar { /* place navbar atop slider */
width: 100%;
opacity: 0.75;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.intro-slider { /* move slider up */
position: relative;
top: -3rem;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<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" />
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<body>
<div style="" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="navfont2">
<p><i class="fa fa-phone-square" aria-hidden="true"></i> +1 809 974 7826</p>
</li>
<li class="navfont2">
<p><i class="fa fa-envelope" aria-hidden="true"></i> orestes#mintech.do</p>
</li>
</ul>
</div>
<hr>
<!-- navbar start -->
<nav class="navbar navbar-default">
<div style="" class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div style="" 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 style="width: 175px;" src="images/mintech.png"></a>
</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 navbar-right">
<li class="navfont">Inicio</li>
<li class="navfont">Nosotros</li>
<li class="navfont">Servicios</li>
<li class="navfont">Proyectos</li>
<li class="navfont">Equipo</li>
<li class="navfont">Contacto</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- navbar end -->
<div class="intro-slider col-xs-12">
<div><img src="https://www.almanac.com/sites/default/files/birth_month_flowers-primary-1920x1280px_pixabay.jpg"></div>
<div><img src="http://balconygardenweb.com/wp-content/uploads/2015/08/most-poisonous-flowers-3_mini.jpg"></div>
<div><img src="http://data.whicdn.com/images/57613434/large.jpg"></div>
</div>

Customizing bootstrap header

I wrote a custom bootstrap header as shown in the screen shot:
I want that navbar to be moved to right so that it can suit the requirements like this.
I used external CDNs for bootstrap and jquery.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<body>
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<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="images/logo.png" alt="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS:
.navbar-fixed-top {
min-height: 80px;
}
.navbar-fixed-top .navbar-collapse {
max-height: 136px;
}
.navbar-collapse {
margin-top: 1%;
}
.navbar{
background-image: none;
}
#media (min-width: 768px) {
.navbar-fixed-top .navbar-collapse {
max-height: 50px;
}
}
#myNavbar {
background-color:#0067ac;
color:#16ac07;
border-radius:0;
}
Fiddler:
https://jsfiddle.net/z4b2bwg6/9/
How can I do it?

Just add the class .navbar-right to make the menu items float to the right - http://getbootstrap.com/components/#navbar-component-alignment
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>

Resizing the bootstrap 3 header items without affecting the style for mobile devices

I have changed the default bootstrap style by adding the margin and padding in my style.css but i want that the navigation would be at the left corner and not in the middle header side when i resize my browser screen to mobile size. How can i do it?
Here is my index.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Responsive Project (Prototype)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<header class="mainHeader">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--HEADER-->
<div class="navbar-header">
<a class="navbar-brand">A.M.®</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--BODY-->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Work Positions</li>
<li>Contacts</li>
</ul>
<!--USER OPTIONS-->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"> Sign Up</span></li>
<li><span class="glyphicon glyphicon-log-in"> Register</span></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
style.css:
body {
background-color: #f2f2f2;
}
.navbar-default {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-nav {
margin-left: 150px;
font-weight: 600;
}
.navbar-header {
padding-left: 150px;
}

You can use media queries to only apply your styles to larger screens, like so:
body {
background-color: #f2f2f2;
}
.navbar-default {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-nav {
font-weight: 600;
}
#media (min-width: 768px) {
.navbar-nav {
margin-left: 150px;
}
.navbar-header {
padding-left: 150px;
}
}

Logo in navbar, spacing above the navigation list, and below the logo

I have been trying to code a responsive header using Bootstrap 3, I just have one.
There is a space above the navigation list, and below the logo as well.
How can I line up the two of them? (logo&nav)
Picture of my header which explains the problem:
My code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom4.css">
<script src="js/respond.js"></script>
</head>
<body>
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<img src="img/logo.png" alt="logo" class="visible-xs">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<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="container">
<div class="collapse navbar-collapse" id="collapse">
<img src="img/logo.png" alt="logo" class="hidden-xs push-left">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>pages</li>
<li>Blog</li>
<li>Portfilio</li>
<li>Conact</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Javasctipt -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Structurally your html differs than my approach and from the docs on bootstrap for the navbar implementation. You put .row around col-* classes. You don't need to duplicate the logo for small and large, if it's the same image. You can also just modify the brand and positioning in the min-width. Don't know your logo widths, but you can easily adjust in the min-width what you need and, also in the min-width, adjust the padding on the parent a so that it visually is in line with the logo.
DEMO: http://jsbin.com/aXAyicIS/1/
EDIT: http://jsbin.com/aXAyicIS/1/edit
CSS
.navbar-brand {
width: 100%;
padding: 0 70px 0 15px;
}
/* logo image on mobile */
.navbar-brand img {
max-width: 100%
}
.navbar-toggle {
position: absolute;
float: none;
right: 0;
top: 5px;
}
#media (min-width:768px) {
.navbar-brand {
float: none;
width: auto;
max-height: none;
padding: 0!important;
}
.navbar-header {
float: left;
margin: 0;
width: 30%;
}
/* logo image */
.navbar-brand img {
margin: 0;
max-width: 100%;
max-height: none;
}
.nav.navbar-nav li.active a,
.nav.navbar-nav li.active a:hover {
background: transparent
}
#nav-collapse {
float: right;
padding: 0!important;
margin: 0!important;
width: 70%;
}
}
HTML
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="http://placehold.it/300x80/444444/FFFFFF&text=LOGO">
</div>
<div id="nav-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Anchor 1</li>
<li>Anchor 2</li>
<li>Anchor 3</li>
<li class="dropdown"> Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Test</li>
<li>Another link</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--.navbar-->