0

Estoy creando un navbar con enlaces que te trasladan a los textos lorem (segun corresponda), lo que ocurre es lo siguiente:

el navbar esta en una posicion fixed y estoy tratando de evitar que el header me tape el texto cuando preciono alguno de los link ("home", "contact", "about") lo pueden ver en la imagen:

introducir la descripción de la imagen aquí

hasta ahi todo bien pero en el momento que preciono "Home", (o alguno) me tapa el texto y aparece asi como el la siguiente imagen:

introducir la descripción de la imagen aquí

les paso el htlm y el estilo que estoy usando

.navbar {
    position: fixed;
    top: 0;
    color: #FFF;
    border: 1px solid #ccc;
    background: blue;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 100;
}

.nav-title {
      text-transform: uppercase;
      width: 50px;
      margin-left: 50px;
    }

 .nav-box {
      width: 300px;
      list-style:none;
      margin-right: 50px;
}

li {
        display: flex;
        justify-content: space-between;
      }
      
      li a {
        color: #fff !important;
          text-decoration: none;
      }
      
      
      .text {
        margin-top: 100px
      }
<div class="navbar">
  <h1 class="nav-title">title</h1>
  <div class="nav-box">
    <li>
      <a href="#home">Home</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </li>
  </div>
</div>
<div class="text">
<h1 id="home">1 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>2 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>3 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>4 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1 id="contact">5 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>6 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>7 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>8 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>9 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1 id="about">10 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>

</div>

les agradezco si me dan una mano c:

2 respuestas 2

2

Mejor sería que uses jQuery. Sólo modifica a tu gusto la altura en "padding-top":"50px" y la velocidad 700.

$(document).ready(function() { 
 // función de los enlaces que contengan #
 $('a[href^="#"]').on("click", function() { 
  var destino = $(this.hash);
 if(destino.length == 0) { 
  destino= $('a[name="' + this.hash.substr(1) + '"]'); 
 } 
 if(destino.length == 0) { 
  destino= $('html'); 
 } 
$("html,body").animate({
 scrollTop: destino.offset().top,
 // ajuste de espacio entre el top
 "padding-top":"50px",
}, 700); // ajuste de velocidad
return false; 
}); 
});
0

Solo agrega esto a tu css:

[id] {
    scroll-margin-top: 100px;
}

El 100px es relativo al tamaño de tu header.

[id] {
    scroll-margin-top: 100px;
}

.navbar {
    position: fixed;
    top: 0;
    color: #FFF;
    border: 1px solid #ccc;
    background: blue;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 100;
    height: 100px; /*Este es un tamaño relativo*/
}



.nav-title {
      text-transform: uppercase;
      width: 50px;
      margin-left: 50px;
    }

 .nav-box {
      width: 300px;
      list-style:none;
      margin-right: 50px;
}

li {
        display: flex;
        justify-content: space-between;
      }
      
      li a {
        color: #fff !important;
          text-decoration: none;
      }
      
      
      .text {
        margin-top: 100px
      }
<div class="navbar">
  <h1 class="nav-title">title</h1>
  <div class="nav-box">
    <li>
      <a href="#home">Home</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </li>
  </div>
</div>
<div class="text">
<h1 id="home">1 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>2 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>3 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>4 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1 id="contact">5 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>6 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>7 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>8 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1>9 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>
<h1 id="about">10 Lorem.</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi provident
  officia mollitia nam! Facilis eius, debitis quo minima magni quas culpa esse
  libero assumenda maiores, iste, quaerat illo sed sequi tempore. Autem
  distinctio ipsa incidunt, veniam modi facilis consectetur suscipit error sunt,
  et rerum enim qui beatae possimus! Veritatis.
</p>

</div>

1
  • Como un plus agrega este atributo para que el desplasamiento sea un poco más suave html {scroll-behavior: smooth;} Commented el 20 jun. a las 20:26

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.