Los enlaces no son visibles cuando se mira en otra dimensión que no sea mi computadora.
Los enlaces en mi barra de navegación desaparecen cuando miro mi sitio web a través de otra dimensión, como la pantalla de un iPhone. Intenté solucionarlo incluso con algunas configuraciones en la sección de medios, pero fue en vano. ¿Es por todo el código o por una sección específica? Necesito algo de ayuda aquí. ¡Gracias de antemano!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lemak</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class = "container">
<nav class = "navbar">
<a href = "/" class = "nav-branding">LEMAK</a>
<ul class = nav-menu>
<li class = "nav-link"><a href = "/">ÜBER UNS</a></li>
<li class = "nav-link"><a href = "/">KONTAKT</a></li>
<li class = "nav-link"> <a href = "/">IMPRESSUM</a></li>
</ul>
</nav>
</div>
<div id = "picture-container">
<div class = "picture"></div>
<div class = "picture"></div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
}
body {
position: relative;
}
header {
position: sticky;
top: 0;
width: 100%
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.container {
width: 1280px;
margin: auto;
}
.navbar, .navbar a {
color: black;
}
.navbar{
width: 95%;
margin: auto;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-menu{
display: flex;
justify-content: space-between;
gap: 3.75rem;
}
.nav-branding{
font-size: 2 rem;
}
@media(max-width: 1280px) {
.container {
width: 1280px;
}
}
/* pcitures*/
#picture-container {
display: flex;
justify-content: space-between; /* Horizontale Ausrichtung beibehalten */
}
.picture {
border: 1px solid black;
height: 80vh;
width: 50%;
}
@media(max-width: 768px) {
#picture-container {
flex-direction: column; /* Bei kleineren Bildschirmen vertikal anordnen */
}
.picture {
width: 100%; /* Auf volle Breite des Containers ändern */
}
}
El problema es que en la línea de código siguiente, usted establece un ancho fijo para la .containerclase, que contiene su barra de navegación. Este ancho fijo hace que la barra de navegación se desborde y se vuelva inaccesible en pantallas más pequeñas.
@media(max-width: 1280px) {
.container {
width: 1280px;
}
}
Para solucionar este problema, debe hacer que su barra de navegación responda utilizando anchos basados en porcentajes en lugar de anchos fijos.
@media (max-width: 1280px) {
.container {
width: 100%;
}
}
Además, no olvide agregar la etiqueta de cierre para la sección de encabezado.</header>
