title: Bootstrap menu pushes another div away
body: <p>I have this problem where my Bootstrap menu pushes another div named "title" down (on mobile, xs) Link to the website so far: <a href="http://20162.hosts.ma-cloud.nl/portfoliowebsite" rel="nofollow noreferrer">http://20162.hosts.ma-cloud.nl/portfoliowebsite</a></p>
  
  <p>I really don't know what I should do now because I want the menu to go down but the div "title" to stay in its place. </p>
  
  <p>HTML: </p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="author" content="Daniel Gotz"&gt;
    &lt;title&gt;Daniel Gotz | Porfolio &lt;/title&gt;
    &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link href="css/styles.css" rel="stylesheet"&gt;
    &lt;link href="css/scrolling-nav.css" rel="stylesheet"&gt;
    &lt;link href="dist/hamburgers.css" rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Exo+2:600,900|Roboto" rel="stylesheet"&gt;
   &lt;/head&gt;
  
  &lt;body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"&gt;
  
    &lt;!-- Navigation --&gt;
  
    &lt;section id="intro" class="intro-section"&gt;
          &lt;nav class="navbar navbar-default" role="navigation"&gt;
          &lt;div class="navbar-header page-scroll"&gt;
            &lt;button class=" hamburger hamburger--spin navbar-toggle visible-xs" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt; &lt;span class=" hamburger-box"&gt;
      &lt;span class=" hamburger-inner"&gt;&lt;/span&gt; &lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
            &lt;ul class="nav navbar-nav right"&gt;
              &lt;li class="hidden"&gt;
                &lt;a class="page-scroll" href="#page-top"&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt; &lt;a class="page-scroll" href="#intro"&gt;Intro&lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a class="page-scroll" href="#mijnwerk"&gt;Mijn werk&lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a class="page-scroll" href="#overdaniel"&gt;Over Daniel&lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a class="page-scroll" href="#contact"&gt;Contact&lt;/a&gt; &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
         &lt;div class="title"&gt;
        &lt;h1&gt; Every mountain top is within reach if you just keep climbing&lt;/h1&gt; &lt;/div&gt;
  
        &lt;div class="berg"&gt;
      &lt;img src="berg.svg"&gt;
  
  
        &lt;/div&gt;
  
  
    &lt;/section&gt;
    &lt;section id="mijnwerk" class="about-section"&gt; &lt;/section&gt;
    &lt;section id="overdaniel" class="services-section"&gt; &lt;/section&gt;
    &lt;section id="contact" class="contact-section"&gt; &lt;/section&gt;
    &lt;!-- jQuery --&gt;
    &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
    &lt;!-- Bootstrap Core JavaScript --&gt;
    &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;!-- Scrolling Nav JavaScript --&gt;
    &lt;script src="js/jquery.easing.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/scrolling-nav.js"&gt;&lt;/script&gt;
    &lt;script src="js/hamburgers.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>    .overflow {
    overflow-x: hidden;
    position: relative;
  }
  
  .home {
    height: 100vh;
    width: 100vw;
    background-color: #2ecc71;
  }
  
  .mijnwerk {
    height: 100vh;
    width: 100vw;
    background-color: #27ae60;
  }
  
  
  .navbar-default {
    background: none;
    border-style: none;
  }
  
  .right {
    float: right;
    text-align: right;
  
  }
  
  .navbar-default .navbar-nav&gt;li&gt;a {
    font-family: 'Roboto', sans-serif;
    color: #ecf0f1;
    font-size: 14px;
  
  
  }
  
  .nav&gt;li&gt;a {
    padding: 15px 25px;
      border-style: none;
  
  
  
  }
  
  .navbar-default .navbar-nav&gt;li&gt;a:focus,
  .navbar-default .navbar-nav&gt;li&gt;a:hover {
    color: #ecf0f1;
        border-style: none;
  
  }
  
  .navbar-default .navbar-toggle:focus,
  .navbar-default .navbar-toggle:hover {
    background: none
  
  
  }
  
  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
    border-style: none;
  
  
  
  }
  
  
  
  h1 {
  
    font-family:  'Exo 2' , sans-serif;
    font-weight: 900;
    font-size: 37px;
    line-height: 60px;
  
  
  }
  
  .title {
    z-index: 2;
    font-family:  'Exo 2' , sans-serif;
    margin-left: auto;
    margin-right: auto;
    vertical-align: center;
    text-align: center;
    width: 350px;
      position: relative;
    top: 35%;
    transform: translateY(-50%);
  
  }
  
  .berg {
      position: absolute;
      width: 100%;
      bottom: 0;
      margin: 0  0 -2px 0;
  
  body {
      width: 100%;
      height: 100%;
  }
  
  html {
      width: 100%;
      height: 100%;
  }
  
  @media(min-width:767px) {
      .navbar {
  
      }
  
      .top-nav-collapse {
          padding: 0;
      }
  }
  
  .intro-section {
      height: 100%;
      background: #2ecc71;
      color: white;
    text-align: center;
  
  
  }
  
  .about-section {
      height: 100%;
      background: #27ae60;
  }
  
  .services-section {
      height: 100%;
      background: #3498db;
  }
  
  .contact-section {
      height: 100%;
      padding-top: 150px;
      text-align: center;
      background: #eee;
  }
  </code></pre>