Tengo un problema con el texto que va arriba de la imagen, necesito que el texto no pase por arriba del header
y que solo se quede en la foto (que el texto pase por abajo del header y no por arriba).
También hay un error para la versión movil (si lo prueban reduciendo el navegador) es que aparece "tienda" al lado del menú desplegable, no quiero que se vea "tienda" en la versión movil ya que quedaría raro al ya tener el menú desplegable.
Intente muchas veces resolverlo pero no lo he logrado resolver. ((Correccion de informacion sencible))
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background: #1E1E1E;
position:fixed;
width: 100%;
left: 0;
top: 0;
right: 0;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.fa-2x a{
float: right;
}
.centered {
color:white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Company name</a>
<div class="fa-2x">
<a class="shopy" href="shop.html">Tienda</a></div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div>
<img src="" width="100%">
</div>
<div class="centered"><h1>Company name</h1></div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>