0

Bueno tengo un par de problemas con mi navbar de boostrap. Entrando en contexto:

cada uno de los items del navbar tiene enlaces directos dentro de la misma pagina <a href="#"> cuando le doy click a alguno de ellos efectivamente me lleva a cada uno de los elementos pero el mismo navbar me tapa el titulo. Ahora no quiero ni ocultar el navbar ya que dinamicamente el se muestra o no, y cambiando el padding o el margin del titulo tampoco funciona aqui les dejo 2 imagenes, la 1ra. de como lo muestra al darle click y la otra como me gustaria que lo mostrara

Asi es como se muestra .. Asi es como quiero que se vea

...


     <div id = miDIV>
    <nav class="nav">
      <div class="container-fluid">
        <div class="download_CV">
          <a href="./assets/cv/CV Jose Valero  - English V.pdf" target="_blank">
            <p>Curriculum <i class="fas fa-cloud-download-alt"></i></p>
          </a>
        </div>
        <div  id="mainListDiv" class="main_list">
          <ul class="navlinks">
            <li><a id="asd" href="https://www.linkedin.com/in/josemiguelvalero/" target="_blank"><i
                  class="fab fa-linkedin-in"></i></a></li>
            <li><a href="https://github.com/jose-valero" target="_blank"><i class="fab fa-github"></i></a>
            </li>
            <li><a id="tuID" href="#about">About Me</a></li>
            <li><a id="tuID" href="#experience">Experience </a></li>
            <li><a id="tuID" href="#education">Education</a></li>
            <li><a id="tuID" href="#courses">Courses</a></li>
          </ul>
        </div>
        <span class="navTrigger">
          <i></i>
          <i></i>
          <i></i>
        </span>
      </div>
    </nav>
  </div>


 <script> 
        $("#tuID").click(function() {
        $(window).scrollTop($('#miDIV').offset().top - 100);})
      </script>

asi lo coloque

1
  • ¡Bienvenido! Sin tener el HTML y el CSS necesarios para poder reproducir tu problema es difícil encontrar la causa. Las imágenes son un buen aporte a modo de apoyo, pero estas nunca deben de sustituir al código.
    – phpMyGuel
    Commented el 20 ene. 2020 a las 16:44

3 respuestas 3

1

Se que tiene tiempo el post mi estimado , logre hacer funcionar el menú pegajoso o sticky solo con CSS , esto va como posible solución a los futuros desarrolladores que tuvieron el mismo problema que nosotros . Agregue lo siguiente a su hoja CSS.

[id] {
   scroll-margin-top: 3.8em;
}

Donde el valor 3.8 em -> corresponde al tamaño que se salta antes del titulo , cambiar según les parezca mas atractivo , Saludos.

0

Podrías utilizar las funciones de jquery offset() y scrolltop().

Agregale un id a tu div y en en el evento click, redireccionalo a ese div y podes sumarle o restarle los pixeles que quieras. Te dejo un ejemplo:

$("#miBoton").click(function() {
    $(window).scrollTop($('#miDIV').offset().top - 100);
};

Saludos!

3
  • Saludos Nicolas gracias por tomarte el tiempo de responderme, pero le puse el ID como me recomendaste al DIV que esta de primero e hice algo asi: $("#education").click(function() { $(window).scrollTop($('#miDIV').offset().top - 100); }); y no logre ningún resultado, tengo cortos 5 meses aprendiendo y bueno si me puedes explicar para sigue sin funcionar seria de mucha ayuda. Gracias Commented el 20 ene. 2020 a las 18:22
  • De nada, te hago dos preguntas: Tenes incluidas las librerias jquery verdad? por otra parte veo que le asignaste el id "education" a tu botón, también le agregaste el id "miDIV" al div al que queres scrollear verdad? Commented el 20 ene. 2020 a las 18:44
  • si tengo las las lirerias de jquery Commented el 20 ene. 2020 a las 21:53
0

Bueno pude lograr que se moviera a donde queria intercambiando el href por un id ahora, en el caso del primer item se mueve perfecto pero en los otros items no hace nada. para aclarar ya verifique en todas secciones del html que esten bien escritos y en el lugar correcto todos mis ID, y revise la funcion tambien en el archivo .js ahora para cada uno de los items del navbar hice algo asi:

$("#aboutButton").click(function () {
    $(window).scrollTop($('#about').offset().top - 180);
});

$("#experienceButton").click(function () {
    $(window).scrollTop($('#experience').offset().top - 350);
 });

$("#educationButton").click(function () {
    $(window).scrollTop($('#education').offset().top - 500);
  });

ahora solo se mueve cuando le doy en about y en los otros items no hace nada. tengo ya un par de dias quizas con este problema tonto pero nada que consigo solución, sera ceguera de codigo idk

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.