0

Estoy usando la version de bootstrap 4.0 y he hecho una barra de navegacion, pero quiero los nav-link o elementos a la derecha y que la barra sea fixed top, he intetado de todas formas pero no sirve.

el codigo:

<nav class="navbar fixed-top navbar-expand-lg ">


            <img src="imagenes/logopeque.png" class="d-sm-none"> 
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
             <span class="navbar-toggler-icon"><i class="fas fa-align-right"> </i></span>
             </button>
        <div class="navbar-header">

             <a class="navbar-brand d-none d-md-block" href="#"><img src="imagenes/logo.png"><img src="imagenes/texto.png"> </a>
                  </div>



        <div class="container">
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
          <ul class="nav-navbar ml-auto">
            <li class="nav-item active"><a class="nav-link" href="#">&ensp;&ensp;INICIO</a></li>
            <li class="nav-item"><a class="nav-link" href="#">&ensp;&ensp;¿QUIENES SOMOS?</a></li>
            <li class="nav-item dropdown">
             <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false">&ensp;&ensp;SERVICIOS <b class="caret"></b></a>
              <ul class="dropdown-menu" id="dropdown">
                <li class="nav-item" id="thisone"><a href="#" class="nav-linksito"> &ensp;ction</a></li>
                <li class="nav-item" id="thisone"><a href="#" class="nav-linksito"> &ensp;nother action</a></li>
                  <li class="nav-item" id="thisone"><a href="#" class="nav-linksito"> &ensp;ction</a></li>
                <li class="nav-item" id="thisone"><a href="#" class="nav-linksito"> &ensp;nother action</a></li>

              </ul>
            </li>
            <li class="nav-item"><a class="nav-link" href="#"> &ensp;&ensp;EVENTOS </a></li>
            <li class="nav-item"><a class="nav-link" href="#">&ensp;&ensp;CONTACTO </a></li>
          </ul>


        </div>
    </div>
        <!-- /.navbar-collapse -->

      <!-- /.container-fluid -->
    </nav>

mi css:

nav{
    background-color::#232323 !important;

}

.navbar-toggler{
    background-color:#2B2BF5 !important;
}
.navbar-toggler-icon{
    color:orange !important;
    top:6px !important;
}
.nav-link{
    font-family: 'Bree Serif',serif !important;
    color:white !important;
    font-size:16px !important;
    }
.nav-link:hover{
    color:#FF8552 !important;
}
.nav-linksito{
    font-family:'Bree Serif', serif !important;
    color:white !important;
    font-size:16px !important;
}
.nav-linksito:hover{
    text-decoration:none !important;
    color:#2b2bf5 !important;
}

¿Alguien podria orientarme?

2
  • Hola @Angel Gomez Cómo no soy fuerte usando Twitter-Bootstrap no te puedo orientar directamente. Sólo puedo indicarte que en tus estilos tienes errores de asignación usas '::' dónde sólo debiera aparecer ':' background-color::#232323 !important;para asignar valores de atributos. Te sugiero hacer el recorrido de bienvenida para enterarte de cómo funcionamos. Y, para tu pregunta ver: NavBars
    – quevedo
    Commented el 1 jul. 2018 a las 3:40
  • Gracias por la sugerencia estimado :-3 Commented el 4 jul. 2018 a las 2:05

1 respuesta 1

0

Mira si no te funciona la propiedad de Bootstrap

Prueba dándole directo al CSS

nav{ position: fixed !important;}

Con eso quedará fijo en top, espero te sirva, saludos

1

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.