Removing space between Navigation bar and banner - html

I'm using Bootstrap to make my custom website but I have a problem. I have a big space between my banner and my navigation bar. I need to remove it without breaking the anything else.
I was searching for fix on this website and on other websites too, but none of those are working. Here's the code:
HTML: http://pastebin.com/FSFA4GhG CSS: http://pastebin.com/TiQ1nm9h
I figured out that the problem is in the <header> somewhere, but I cannot fix it/find that error.


You have the header set at 100px (the navbar default is min-height: 50px) and change the top property on the banner id as well to 50px
Sidenote: you have 2 separate IDs set on your navbar-collapse div causing the mobile nav to not work correctly.
See example Snippet.
body,
div,
h1,
h2,
p {
margin: 0;
padding: 0;
}
body {
text-align: left;
}
header {
height: 50px;
width: 100%;
background: #f00;
z-index: 50;
position: fixed;
display: inline-block;
padding: 0;
}
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 50px;
background: #AE1;
}
#content {
width: 100%;
position: relative;
top: 400px;
background: #ebe;
height: 1000px;
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="container">
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">MENU</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">gg 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>11
</li>
<li>12
</li>
</ul>
</li>
<li>gg2
</li>
<li>gg 3
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="banner">
<h2>BANNER</h2>
</div>
<div id="content">
<p>
CONTENT
</p>
</div>
</div>


It's simple, just remove the height property from your #header and put a correctly top property on your #banner (same that your nav height):
body, div, h1, h2, p{
margin: 0;
padding: 0;
}
body{
text-align: left;
}
header{
width: 100%;
z-index: 50;
position: fixed;
display: inline-block;
}
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 50px;
background: #AE1;
}
#content {
width: 100%;
position: relative;
top: 400px;
background: #ebe;
height: 1000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fred WEB</title>
<!--Zobrazenie pre mobily-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--Pridanie JQuery a Boostrapu-->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<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>
<div id="container">
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">MENU</a>
</div>
<div id ="menu" class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">gg 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>11</li>
<li>12</li>
</ul>
</li>
<li>gg2</li>
<li>gg 3</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="banner">
<h2>BANNER</h2>
</div>
<div id="content">
<p>
CONTENT
</p>
</div>
</div>
</body>
</html>


try to add
nav {
margin: 0px !important;
}
And to edit banner rule
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 50px;
background: #AE1;
}

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.

How to move Bootstrap navbar to the right?

I am using an absolutely positioned navbar in twitter Bootstrap, however when I use the .pull-right class inside of my tag with the navbar items the navbar items stay to the left. I have also tried using float: right; and text-align: right; and those didn't work. Does the absolute positioning of the navbar affect this behaviour? How can I get the navbar items to go to the right hand side of the banner?
.wrapper {
position: relative;
}
#banner {
height: 50vh;
width: 100vw;
position: relative;
}
#responsive-nav {
background-color: transparent;
position: absolute;
z-index: 2;
}
#logo {
position: absolute;
top: 15px;
left: 60px;
z-index: 1;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-nav">
<ul class="nav navbar-nav pull-right">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
<div class="wrapper">
<img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1">
<img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1">
</div>
</div>
</div>
</nav>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Here you go with a solution https://jsfiddle.net/j6sqyru8/
.wrapper {
position: relative;
}
#banner {
height: 50vh;
width: 100vw;
position: relative;
}
#responsive-nav {
background-color: transparent;
position: absolute;
z-index: 2;
}
.navbar-toggle {
z-index: 9;
}
#logo {
position: absolute;
top: 15px;
left: 60px;
z-index: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 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.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-nav">
<ul class="nav navbar-nav pull-right">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
<div class="wrapper">
<img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1">
<img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1">
</div>
</div>
</div>
</nav>
Hope this will help you.

parent div with id="responsive-nav" must be width 100%

Add width: 100% to the #responive-nav.
#responsive-nav {
background-color: transparent;
position: absolute;
z-index: 2;
width: 100%;}

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>

Bootstrap collapse not working properly...Bootstrap right side white space

First Question
Bootstrap collapse not working when i check responsive...but when i resize my browser it works but still there is a prblem i dont want it to collapsed next to navbar brand...it must be under it
collapseImg
<!DOCTYPE html>
<html>
<head>
<title>Company Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="Font Awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="Flex Slider/flexslider.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="mainNav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header pull-left">
Lorem
</div>
<button type="button" class="navbar-toggle btn navbar-btn" data-toggle="collapse" data-target="#navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
whiteSpaceImg
Second questioin is about white space on right side
<!-- SLIDER -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="flexslider" id="slider">
<ul class="slides">
<li id="slide1"><video id="myVideo" src="./videos/myVideo.mp4" style="width:100%;"></video></li>
<li id="slide2"><img src="Images/Slider Images/image1.jpg"></li>
<li id="slide3"><img src="Images/Slider Images/image2.jpg"></li>
<li id="slide4"><img src="Images/Slider Images/"></li>
<li id="slide4"><img src="Images/Slider Images/"></li>
</ul>
</div>
</div>
</div>
</div>
/----- NAVIGATION ----/
html{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
#mainNav{
background:transparent;
border: none;
overflow:hidden !important;
}
.navbar-default a{
color: white !important;
transition: color 0.5s;
font-weight: bolder;
}
.navbar-default a:hover{
color: black !important;
}
#slider{
border: none;
margin: 0px !important;
}
/* ---- HEADER -----*/
#slider img{
height: 100vh;
width: 100%;'
}
.col-sm-12{
padding-left:0 !important;
padding-right:0 !important;
}

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-->