0

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>

2
  • deseo eliminar la pregunta ya que podriera afectar a mi empreza y no considero que sea de ayuda a alguien mas
    – Zerotet
    Commented el 5 mar. 2020 a las 2:39
  • Brian, las preguntas no se pueden eliminar si ya tienen una respuesta. Se ha editado toda referencia al nombre de la empresa, con eso debería bastar.
    – Pikoh
    Commented el 5 mar. 2020 a las 10:56

1 respuesta 1

2

Considera aplicar los cambios del siguiente modo

  • El texto TIENDA lo envolvería en un span para que de este modo no rompa tu maquetación y lo podamos mover

Código:

<span>Tienda</span>
  • Al span del paso anterior lo modificamos a nivel de la media query indicando que tenga un display: none;

Código:

.shopy span{
  display: none;
}
  • Ahora el icono del menú de hamburguesa quedará un poco lejos de la orilla, para evitar esto, lo podemos mover con margin-right 60px a la derecha de este modo:

Código:

.fa {
  margin-right: -60px;
}
  • Finalmente para evitar que cuando haces scroll el título pase por arriba del encabezado del menú, alcanza con que a la clase .topnav le pongas un z-index de 1 así:

Código

.topnav{
  // ... tus estilos
  z-index: 1;
} 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.