Overlapping div, creating unclickable links - html

Question

My problem is that a div class with bootstrap "navbar" is overlapping my md-12 div however the content is still displayed but not clickable. I have no clue what makes this happens.
DEMO: https://elevarbetensys.se/SY15/MS15/GYARB/index.php
Question: How do i "remove" or change so it can be clickable. My logo and languageselector aren't clickable now.
<div class="container text-center">
<div class="row">
<div id="home">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float: left;">
<h6>This restaurant is educational purpose<br>All orders will be considered as donations.</h6>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float: left;">
<a href="#home">
<img class="navbar" src="images/Burning_Rooster.png" alt="Burning_Rooster">
</a>
<p>RESTAURANT & LOUNGE BAR</p>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="float: left;">
<ul class="languagepicker roundborders large navbar-right">
<li><img src="images/flags/us.png"/>English</li>
<li><img src="images/flags/nl.png"/>Nederlands</li>
<li><img src="images/flags/de.png"/>German</li>
<li><img src="images/flags/fr.png"/>Français</li>
<li><img src="images/flags/es.png"/>Español</li>
<li><img src="images/flags/it.png"/>Italiano</li>
<li><img src="images/flags/se.png"/>Svenska</li>
</ul>
</div>
</div>
<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">
<i class="fa fa-bars" aria-hidden="true" style="font-size:24px;"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>
HOME
</li>
<li>
MENU
</li>
<li>
GALLERY
<li>
RESERVATION
</li>
<li>
REVIEWS
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
<img src="images/restaurant/welcome.jpg" alt="Welcome" class="img-responsive img-rounded">
<h2>Burning Rooster Since 1969</h2>
<p>14 February 1969, was the year evertying came to place. Our service have been running since.
<br>
At our restaurant we serve you the finest food and desserts. Burning Rooster became popular immediatly with our rooster delicacy.
<br>
People across the whole world came to taste our finest rooster meny. Our meny have gave pleasure to world famous humans like
<br>
Freddy Mercury, Mel Gibson, Kiss and Donald duck creator.
</p>
<hr>
</div>
</div>
CSS:
#home {
height: auto;
margin-right: auto;
margin-left: auto;
width: auto;
text-align: center;
}
.languagepicker {
background-color: #FFF;
display: inline-block;
padding: 0;
height: 40px;
overflow: hidden;
transition: all .3s ease;
margin: 0 0 10px 0;
vertical-align: top;
float: left;
}
.languagepicker:hover {
/* don't forget the 1px border */
height: 81px;
}
.languagepicker a{
color: #000;
text-decoration: none;
font-size: 16px;
}
.languagepicker li {
display: block;
padding: 0px 20px;
line-height: 40px;
border-top: 1px solid #EEE;
}
.languagepicker li:hover{
background-color: #EEE;
}
.languagepicker a:first-child li {
border: none;
background: #FFF !important;
}
.languagepicker li img {
margin-right: 5px;
}
.roundborders {
border-radius: 5px;
}
.large:hover {
/*
don't forget the 1px border!
The first language is 40px heigh,
the others are 41px
*/
height: 286px;
}

Answer 1

Firstly, you're closing your #home as soon as you create it: <div id="home"></div>.
Secondly, I think all you need to do is override the position property of the navbar, which is relative. Assuming nav is child of #home, try the following:
#home > nav {
position: inherit;
}