0

hola soy realmente nuevo en esto de bootstrap, tengo varios errores, la clase .sticky-top no me funciona

si alguien me puede hechar una mano lo agradeceria.

este es el codigo del menu:

<div class=".sticky-top row">
  <nav class=".sticky-top fixed-bottom navbar navbar-expand-lg navbar-light bg-light" style="height: 
 90px !important; position: sticky;">
   <div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <a class="navbar-brand" href="#">
    <img src="img/logo1.svg" width="200" height="80" class="d-inline-block align-top" alt="">
    </a>
        <li class="nav-item active">
         <a class="nav-link" href="#">¿Que es?<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#comofunciona">¿Cómo funciona?</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#cuantovale">Tarifas</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Puntos autorizados</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Preguntas frecuentas</a>
        </li>
        <a id="botop" class="navbar-brand" href="#">
        <img src="img/google-play.png" width="98" height="30" class="d-inline-block align-top" alt="">
        </a>
        <a id="botop" class="navbar-brand" href="#">
        <img src="img/apple-store.png" width="98" height="30" class="d-inline-block align-top" alt="">
        </a>
        <li class="nav-item">
          <a class="nav-link" href="#"><img src="img/logo.png" width="24" height="24" class="d-inline-block align-center" alt="">Iniciar sesión</a>
        </li>
    </ul>

agradezco de antemano cualquier colaboración.

1
  • ¿Porqué mezclar sticky-top con fixed-bottom? ¿Entiendes lo que intentas hacer? ¿Has leído realmente la documentación de ambas clases? Saludos Commented el 8 abr. 2020 a las 6:46

2 respuestas 2

0

Le estas agregando un punto a la clase <div class=".sticky-top row">

seria así:

<div class="sticky-top row">

y a la de abajo tambien le estas poniendo un punto .

deberías sacarlo...

proba entonces asi:

<div class="sticky-top">
  <nav class="sticky-top fixed-bottom navbar navbar-expand-lg navbar-light bg-light" style="height: 
 90px !important; position: sticky;">
   <div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <a class="navbar-brand" href="#">
    <img src="img/logo1.svg" width="200" height="80" class="d-inline-block align-top" alt="">
    </a>
        <li class="nav-item active">
         <a class="nav-link" href="#">¿Que es?<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
        <a class="nav-link" href="#comofunciona">¿Cómo funciona?</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#cuantovale">Tarifas</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Puntos autorizados</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Preguntas frecuentas</a>
        </li>
        <a id="botop" class="navbar-brand" href="#">
        <img src="img/google-play.png" width="98" height="30" class="d-inline-block align-top" alt="">
        </a>
        <a id="botop" class="navbar-brand" href="#">
        <img src="img/apple-store.png" width="98" height="30" class="d-inline-block align-top" alt="">
        </a>
        <li class="nav-item">
          <a class="nav-link" href="#"><img src="img/logo.png" width="24" height="24" class="d-inline-block align-center" alt="">Iniciar sesión</a>
        </li>
    </ul>

Proba si estas incluyendo bien los archivos de bs4

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>



    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>
6
  • Hola, mil gracias por responder a mi pregunta pero así le elimine el punto no funciona Commented el 7 abr. 2020 a las 23:13
  • proba con lo que te mande, solo le saque el row que estaba en la primera linea, yo lo veo bien, quizá tenes un div container que te lo rompe todo, de ultima si es que lo tenes sacalo... Commented el 7 abr. 2020 a las 23:20
  • Te cuento que tampoco funcionó, tiene algo que ver con la versión de bootstrap? tengo esta : <link rel="stylesheet" href="stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/…" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> Commented el 7 abr. 2020 a las 23:47
  • fijate si esta bien integrado: proba con esto; ahi edito mi respuesta por que no me deja por aca Commented el 7 abr. 2020 a las 23:55
  • Pues yo copié el link rel de la pagina de bootstrap, cómo podría ver si esta bien integrado? Commented el 7 abr. 2020 a las 23:58
0

Te dejo un ejemplo con Bootstrap 4.6.

Las clases "row" se usan con "col" adentro, así que eliminé el primer div, el nav lleva varios cambios que dejé reflejados, en el nav arreglé las clases que tenía empezando con "." y quité fixed-bottom, no se utiliza junto con sticky-top, completé lo que faltaba de código. Agregué botón hamburguesa y los scripts para que funcione el toggle.

Dejo código completo de ejemplo.

<!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" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <nav class="sticky-top navbar navbar-expand-lg navbar-light bg-light">
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
          <a class="navbar-brand" href="#">
            <img
              src="img/logo1.svg"
              width="200"
              height="80"
              class="d-inline-block align-top"
              alt=""
            />
          </a>
          <li class="nav-item active">
            <a class="nav-link" href="#"
              >¿Que es?<span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#comofunciona">¿Cómo funciona?</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#cuantovale">Tarifas</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Puntos autorizados</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Preguntas frecuentas</a>
          </li>
          <a id="botop" class="navbar-brand" href="#">
            <img
              src="img/google-play.png"
              width="98"
              height="30"
              class="d-inline-block align-top"
              alt=""
            />
          </a>
          <a id="botop" class="navbar-brand" href="#">
            <img
              src="img/apple-store.png"
              width="98"
              height="30"
              class="d-inline-block align-top"
              alt=""
            />
          </a>
          <li class="nav-item">
            <a class="nav-link" href="#"
              ><img
                src="img/logo.png"
                width="24"
                height="24"
                class="d-inline-block align-center"
                alt=""
              />Iniciar sesión</a
            >
          </li>
        </ul>
      </div>
    </nav>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Esta es la documentación que utilicé: https://getbootstrap.com/docs/4.6/components/navbar/

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.