Good morning everyone.
When I change the position of the text to top of the site to position:absolute;
my nav bar has a slight margin at the top.
how can I resolve this?
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) { delta /= 2; }
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
document.body.appendChild(css);
};
/* MENU*/
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
/* ========================= MENU ========================= */
header {
width: 100%;
height: 100vh;
background-size: cover;
background-image: url("../img/cover.jpeg");}
#topo {
z-index: -2;
}
#topo img{
width: 100%;
z-index: -1;
}
main {
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: 6;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
text-align: right;
margin: 0;
padding: 0 40px 0 0;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
nav ul li a a:hover {
text-decoration: none;
color: #8b8b8b;
}
.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;
}
/* ========================= TEXTO DO TOPO ========================= */
#texto-topo p{
font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
position:absolute;
font-size: 50px;
color: white;
height: 100%;
min-height: 100%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
left: 10%;
right: 10%;
font-weight:bold;
}
<!-- == MENU == -->
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li><a href="#">INICIO</a></li>
<li><a href="#">SOBRE MIM</a></li>
<li><a href="#">PORTIFOLIO</a></li>
<li><a href="#">CONTATO</a></li>
</ul>
</div>
</nav>
<!-- == TEXTO DO TOPO ==-->
<div id="texto-topo">
<h1>
<p href="" class="typewrite" data-period="2000" data-type='[ "OLÁ, MEU NOME É JOÃO DIVINO.", "SOU DESENVOLVEDOR WEB FRONT-END", "AMO DESENVOLVER", "TENHO UM PÉ NO DESING" ]'>
<span class="wrap"></span>
</p>
</h1>
</div>
<script>
</script>
</header>
</div>