text stuckt to the header?

Question

I’m trying to move my text to the middle of my header on the image but as soon as I move it the whole header follows. Could someone try to help me solve this issue? As you see I’m trying to make it using margin-top but when I implement this the header follows. I have closed all the divs that affects the image.

html, body {
      margin: 0;
      padding: 0;
   text-align: center;
      width: 100%;
}

body {
      font-family: 'Josefin Sans', sans-serif;
   text-align: center;
}

header {
      width: 100%;
      height: 400px;
      background: url(/assets/image/tjanst.jpg) no-repeat 50% 50%;
      background-size: cover;
}
.content {
      width: 94%;
      margin: 4em auto;
      font-size: 20px;
      line-height: 30px;
      text-align: justify;
}

.logo {
      line-height: 60px;
      position: fixed;
      float: left;
      margin: 16px 46px;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      letter-spacing: 2px;
}

nav {
      position: fixed;
      width: 100%;
      line-height: 60px;
   z-index: 10;
}

nav ul {
      line-height: 60px;
      list-style: none;
      background: rgba(0, 0, 0, 0);
      overflow: hidden;
      color: #fff;
      text-align: right;
      margin: 0;
      padding-right: 40px;
      transition: 1s;
}

nav.black ul {
      background: #000;
    padding: 16px 40px;
}

nav ul li {
      display: inline-block;
      padding: 16px 40px;
}
.move-down  h3{
 margin-top: 200px;
 max-width: 400px;
}

nav ul li a {
 font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
 text-decoration: none;
}
a {
    color: #fff;
    text-decoration: none;
}

.menu-icon {
      line-height: 60px;
      width: 100%;
      background: #000;
      text-align: right;
      box-sizing: border-box;
      padding: 15px 24px;
      cursor: pointer;
      color: #fff;
      display: none;
}
@media(max-width: 786px) {

      .logo {
            position: fixed;
            top: 0;
            margin-top: 16px;
      }

      nav ul {
            max-height: 20px;
            background: #000;
      }

      nav.black ul {
            background: #000;
      }

      .showing {
            max-height: 34em;
      }

      nav ul li {
            box-sizing: border-box;
            width: 100%;
            padding: 24px;
            text-align: center;
      }

      .menu-icon {
            display: block;
      }
   
   }

 <header>
                  <nav>
                        <div class="menu-icon">
                              <i class="fa fa-bars fa-2x"></i>
                        </div>
                        <div class="logo wow tada">
                        </div>
                        <div class="menu">
                              <ul>
                                     <li><a href="Start.html">START</a></li>
                                    <li><a href="Tjanster.html">TJÄNSTER</a></li>
                                    <li><a href="omoss.html">OM OSS</a></li>
                                    <li><a href="kontakt.html">KONTAKT</a></li>
                              </ul>
                        </div>
                  </nav>
          <div class="move-down wow fadeInUp"><h3> VILL GÖRA KUNDEN NÖJD</h3>
       <h3> tel: 070719763 </h3></div>
      </header>

how it looks now https://i.stack.imgur.com/vOQGa.png

score 1 · Accepted Answer · edited Jan 09 '19 at 07:59

1

Well remove 'margin-top: 200px;' in the '.move-down h3' and add 'padding: 200px 0px 0px 0px;' or 'padding-top: 200px;'

edited Jan 09 '19 at 07:59

Albert Einstein

7,472
8
36
71

answered Jan 09 '19 at 07:54

Jaapaap

221
1
5

You are a saver! thanks! – Adnan Cejvan Jan 09 '19 at 07:57
@AdnanCejvan You are welcome :) – Jaapaap Jan 09 '19 at 07:59

score 0 · Answer 2 · answered Jan 09 '19 at 07:51

0

Yes, Simple solution is. Add this CSS

h3{
 maring:0;
}

Hope this helps.

answered Jan 09 '19 at 07:51

Thanveer Shah

3,250
2
15
31

score -1 · Answer 3 · answered Jan 09 '19 at 07:52

-1

Instead of adding margin-top add top value to relatively positioned element.

.move-down h3 {
    max-width: 400px;
    position: relative;
    top: 205px;
}

https://jsfiddle.net/6uedrb89/12/

answered Jan 09 '19 at 07:52

Nitha

672
5
10

text stuckt to the header?

3 Answers3