2

Quiero que parte de la imagen o contenido no se ponga debajo en el mismo nivel, sino que empiece un poco por debajo del navbar a ver si con la imagen puedo expresarme mejor. Lo quie quiero es que el contenido que va debajo del header nav pues este debajo del nav como si este no fuera fixed, pero cuando ya empieces a bajar ya si se ponga encima.

introducir la descripción de la imagen aquí

*{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    align-items: center;
    text-align: center;
}

/* NAVBAR */
header {
    border-bottom: 1px solid seashell;
    width: 100%;
    position: fixed;
    height: 69px;
    z-index: 1;
    right: 0;
    left: 0;
    top: 0;
}
nav {
    
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
nav img {
    margin-left: 10px;
}
ul {
    list-style: none;
    display: flex;
}
li {
    margin: 0 0.5em;
    text-decoration: underline;
}

/* MISSION */
.mission {
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    height: 700px;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
}

.mission-text {
    width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox tea cozy</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    
    <header>
        <nav>
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" height="50px" alt="logo">
            <ul>
                <li>Mission</li>
                <li>Featured Tea</li>
                <li>Locations</li>
            </ul>
        </nav>
    </header>
    <div class="mission">

        <div class="mission-text">
            <h2>Our Mission</h2>
            <h4>Handpicked, artisanally curated, Free Range,</h4>
        </div>

    </div>
    <main>
        
    </main>
    <footer>

    </footer>
    
</body>
</html>

1 respuesta 1

3

Lo que puedes hacer es ponerle a tu contenedor mission un margin-top: 70px; el margin debe ser el valor del tamaño de tu header, con eso al principio se ve que esta debajo del header.

*{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    align-items: center;
    text-align: center;
}

/* NAVBAR */
header {
    border-bottom: 1px solid seashell;
    width: 100%;
    position: fixed;
    height: 69px;
    z-index: 1;
    right: 0;
    left: 0;
    top: 0;
}
nav {
    
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
nav img {
    margin-left: 10px;
}
ul {
    list-style: none;
    display: flex;
}
li {
    margin: 0 0.5em;
    text-decoration: underline;
}

/* MISSION */
.mission {
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    height: 700px;
    margin: 0 auto;
    margin-top: 70px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
}

.mission-text {
    width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox tea cozy</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    
    <header>
        <nav>
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" height="50px" alt="logo">
            <ul>
                <li>Mission</li>
                <li>Featured Tea</li>
                <li>Locations</li>
            </ul>
        </nav>
    </header>
    <div class="mission">

        <div class="mission-text">
            <h2>Our Mission</h2>
            <h4>Handpicked, artisanally curated, Free Range,</h4>
        </div>

    </div>
    <main>
        
    </main>
    <footer>

    </footer>
    
</body>
</html>

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.