10

EDITO DE NUEVO:

He utilizado el código del compañero @Arngue, pero no logro lo que necesito. También he probado el código de @JheymanMejia pero no me funciona como su ejemplo, a pasar de añadir el código similar al que él ha mostrado.

En mi proyecto la barra de navegación sale desde el principio, rompiendo la imagen del slider. Debo decir que la consola de Chrome me da un error, muestra que jQuery no está definido:

Uncaught ReferenceError: jQuery is not defined at....

A pesar de estar haciendo referencia a la librería con el cmd:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Les muestro en una imagen cómo se ve, a ver qué puedo hacer para corregirlo: introducir la descripción de la imagen aquí

Estoy editando una plantilla y no funciona del todo bien, ya que quiero que cuando entre en el sitio, se vea el slider y al hacer scroll hacia abajo, después del slider aparezca la barra de navegación y quede fija.

Empieza con un slider, pero las imágenes que puse en este slider, no ocupan el ancho total de la pantalla.

La plantilla utiliza Bootstrap v3.3.0. He buscado información de bootstrap, pero no me queda claro cómo puedo hacer lo que busco.

A pesar de estar la barra de navegación debajo del slider, ésta aparece arriba al abrir el sitio.

¿Cómo puedo poner el slider y cuando haga scroll llegar a la barra de navegación y quede fija en la parte de arriba de la página?

EDITO LA PREGUNTA:

Yo quería que quedara como en esta imagen : https://ibb.co/6FrrSQP

Se vea la imagen completa sin ver los enlaces de la barra de navegación, y luego quede la barra de navegación arriba, como la segunda imagen, quedando la barra de navegación arriba: https://ibb.co/VLm7zcn

introducir la descripción de la imagen aquí

/////////////////////////////////////////////////////////

introducir la descripción de la imagen aquí

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800);

body {
  background: #fff;
  font-family:'Open Sans', Arial, sans-serif;
  color:#333;
  line-height:1.6em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight:500; 
    font-family:'Open Sans', Arial, sans-serif;
	color:#333;
}

h1{
  font-size: 36px;
  color:#fff;
}

h2{
  font-size: 20px;
}

h3{
  font-size: 16px;
  color: #787878;
  font-weight: 400;
  line-height: 24px;
}

h4{
  font-size: 16px;
}

a {
  color: #E8CE0E;
  -webkit-transition: color 300ms, background-color 300ms;
  -moz-transition: color 300ms, background-color 300ms;
  -o-transition:  color 300ms, background-color 300ms;
  transition:  color 300ms, background-color 300ms;
}

a:hover, a:focus {
  color: #d43133;
}

hr {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #fff;
}


.btn-primary {
  padding: 8px 20px;
  background: #E8CE0E;
  color: #fff;
  border-radius: 4px;
  border:none;
  margin-top: 10px;
}


.btn-primary:hover, 
.btn-primary:focus{
  background: #E8CE0E;
  outline: none;
  box-shadow: none;
} 

.btn-transparent {
  border: 3px solid #fff;
  background: transparent;
  color: #fff;
}

.btn-transparent:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

a:hover,
a:focus {
  color: #000;
  text-decoration: none;
  outline: none;
}

.dropdown-menu {
  margin-top: -1px;
  min-width: 180px;
}

.center h2{
  font-size: 36px;
  margin-top: 0;
  margin-bottom: 20px;
}

.media>.pull-left{
  margin-right: 20px;
}

.media>.pull-right{
  margin-left: 20px;
}

body > section {
  padding: 70px 0;
}

.center {
  text-align: center;
  padding-bottom: 55px;
}

.scaleIn {
  -webkit-animation-name: scaleIn;
  animation-name: scaleIn;
}

.lead{
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.transparent-bg {
  background-color: transparent !important;
  margin-bottom: 0;
}

@-webkit-keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}


/*************************
*******Header******
**************************/
.navbar-fixed-top .navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar>.container .navbar-brand{
  margin-left: 0;
}

.top-bar {
  padding: 10px 0;
  background: #090909;
  border-bottom: 1px solid #222;
  line-height: 28px;
}

.social{
  text-align: center;
}

.social-share{
 display: inline-block;
 list-style: none;
 padding: 0;
 margin: 0;
}

ul.social-share li {
  display: inline-block;
}

ul.social-share li a {
  display: inline-block;
  color: #fff;
  background: #404040;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 2px;
}

ul.social-share li a:hover {
  background: #E8CE0E;
  color: #fff;
}

.navbar-brand {
  padding: 0;
  margin:0;
  color:#E8CE0E;
}
.navbar-header a.navbar-brand {
  color:#E8CE0E;
}

.navbar {
  border-radius: 0;
  margin-bottom: 0;
  background: #151515;
  padding: 15px 0;
  padding-bottom: 0;
}

 .navbar-nav{
  margin-top: 12px;
 }

.navbar-nav>li{
  margin-left: 25px;
  padding-bottom: 28px;
}

.navbar-fixed-top .navbar-nav > li > a {
  padding: 5px 15px;
  margin: 0;
  border-radius: 3px;
  color: #fff;
  line-height: 24px;
  display: inline-block;
}

.navbar-fixed-top .navbar-nav > li > a:hover{
	background-color: #E8CE0E;
  color: #333;
}

.navbar-fixed-top {
  border: none;
}

.navbar-fixed-top .navbar-brand {
  font-size: 36px;
  line-height: 50px;
  color: #fff;
}

.navbar-fixed-top .navbar-nav > .active > a,
.navbar-fixed-top .navbar-nav > .active > a:hover,
.navbar-fixed-top .navbar-nav > .active > a:focus,
.navbar-fixed-top .navbar-nav > .open > a,
.navbar-fixed-top .navbar-nav > .open > a:hover,
.navbar-fixed-top .navbar-nav > .open > a:focus {
  background-color: #E8CE0E;
  color: #333;
}

.navbar-fixed-top .navbar-nav .dropdown-menu {
  background-color: rgba(0,0,0,.85);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  border: 0;
  padding: 0;
  margin-top: 0;
  border-top: 0;
  border-radius: 0;
  left: 0;
}

.navbar-fixed-top .navbar-nav .dropdown-menu:before{
  position: absolute;
  top:0;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li > a {
  padding: 8px 15px;
  color: #fff;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li:hover > a,
.navbar-fixed-top .navbar-nav .dropdown-menu > li:focus > a,
.navbar-fixed-top .navbar-nav .dropdown-menu > li.active > a {
  background-color: #E8CE0E;
  color: #fff;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li:last-child > a {
  border-radius: 0 0 3px 3px;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li.divider {
  background-color: transparent;
}

.navbar-fixed-top .navbar-collapse,
.navbar-fixed-top .navbar-form {
  border-top: 0;
  padding-bottom: 0;
}


/*************************
*******Home Page******
**************************/


.slider {
  position: relative;
  margin-top:130px;
}

#carousel-slider {
  position: relative;
}

#carousel-slider .carousel-indicators {
  bottom: -25px;
}

#carousel-slider .carousel-indicators li {
  border: 1px solid #ffbd20;
}

#carousel-slider a i {
  border: 1px solid #777;
  border-radius:50%;
  font-size: 28px;
  height: 50px;
  padding: 8px;
  position: absolute;
  top: 50%;
  width: 50px;
  color:#777;
}

#carousel-slider a i:hover {
  background:#E8CE0E;
  color:#fff;
  border: 1px solid #E8CE0E;
}

#carousel-slider 
.carousel-control {
  width:inherit;
}

#carousel-slider .carousel-control.left i {
  left:-25px
}

#carousel-slider .carousel-control.right i {
  right: -25px;
}

#carousel-slider
.carousel-control.left, 
#carousel-slider
.carousel-control.right {
  background: none;
}



#feature {
  background: #f2f2f2;
  padding-bottom: 40px;
}
#feature.transparent-bg {
  margin-top:-40px;
  
}
.features{
  padding: 0;
}

.feature-wrap {
  margin-bottom: 35px;
  overflow: hidden;
}

.feature-wrap h2{
  margin-top: 10px;
}

.feature-wrap .pull-left {
  margin-right: 25px;
}

.feature-wrap i{
  font-size: 48px;
  height: 110px;
  width: 110px;
  margin: 3px;
  border-radius: 100%;
  line-height: 110px;
  text-align:center;
  background: #ffffff;
  color: #E8CE0E;
  border: 3px solid #ffffff;
  box-shadow: inset 0 0 0 5px #f2f2f2;
  -webkit-box-shadow: inset 0 0 0 5px #f2f2f2;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
  float: left;
  margin-right: 25px;
}

.feature-wrap i:hover {
  background: #E8CE0E;
  color: #fff;
  box-shadow: inset 0 0 0 5px #E8CE0E;
  -webkit-box-shadow: inset 0 0 0 5px #E8CE0E;
  border: 3px solid #E8CE0E;
}

#recent-works .col-xs-12.col-sm-4.col-md-3{
  padding: 0;
}

.recent-work-wrap {
  position: relative;
}

.recent-work-wrap img{
  width: 100%;
}

.recent-work-wrap .recent-work-inner{
  top: 0;
  background: transparent;
  opacity: .8;
  width: 100%;
  border-radius: 0;
  margin-bottom: 0;
}

.recent-work-wrap .recent-work-inner h3{
  margin: 10px 0;
}

.recent-work-wrap .recent-work-inner h3 a{
  font-size: 24px;
  color: #fff;
}

.recent-work-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 0;
  background: #333;
  color: #fff;
  vertical-align: middle;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;  
  padding: 30px;
}

.recent-work-wrap .overlay .preview {
  bottom: 0;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  border-radius: 0;
  background: transparent;
  text-align: center;
  color: #fff;
}

.recent-work-wrap:hover .overlay {
  opacity: 1;
}

.services-wrap .pull-left {
  margin-right: 20px;
}

#middle {
  background: #fff;
  margin-top:-90px;
}

.skill h2{
  margin-bottom: 25px;
}

.progress-wrap{
  position: relative;
}

.progress .color1,
.progress .color1 .bar-width{
  background: #2d7da4;
}

.progress .color2,
.progress .color2 .bar-width{
  background: #6aa42f;
}

.progress .color3,
.progress .color3 .bar-width{
  background: #ffcc33;
}

.progress .color4,
.progress .color4 .bar-width{
  background: #db3615;
}

.progress, 
.progress-bar {
  height: 15px;
  line-height: 15px;
  background: #e6e6e6;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  text-align: right;
}

.progress{
  position: relative;
}

.progress .bar-width{
  position: absolute;
  width: 40px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  top: -30px;
  border-radius: 2px;
  margin-left: -30px;
}

.progress span{
  position: relative;
}

.progress span:before{
  content: " ";
  position: absolute;
  width: auto;
  height: auto;
  border-width: 8px 5px;
  border-style: solid;
  bottom: -15px;
  right: 8px;
}

.progress .color1 span:before{
  border-color: #2d7da4 transparent transparent transparent;
}

.progress .color2 span:before{
  border-color: #6aa42f transparent transparent transparent;
}

.progress .color3 span:before{
  border-color: #ffcc33 transparent transparent transparent;
}

.progress .color4 span:before{
  border-color: #db3615 transparent transparent transparent;
}

.accordion h2{
  margin-bottom: 25px;
}

.panel-default{
  border-color: transparent;
}

.panel-default>.panel-heading,
.panel{
  background-color: #e6e6e6; 
  border:0 none;
  box-shadow:none;
}

.panel-default>.panel-heading+.panel-collapse .panel-body{
  background: #fff;
  color: #858586;
}

.panel-body{
  padding: 20px 20px 10px;
}

.panel-group .panel+.panel{
  margin-top: 0;
  border-top: 1px solid #d9d9d9;
}

.panel-group .panel{
  border-radius: 0;
}

.panel-heading{
  border-radius: 0;
}

.panel-title>a{
  color: #4e4e4e;
}

.accordion-inner img{
  border-radius: 4px;
}

.accordion-inner h4{
  margin-top: 0;
}

.panel-heading.active{
  background: #1f1f20;
}

.panel-heading.active .panel-title>a{
  color:#fff;
}

a.accordion-toggle  i{
  width: 45px;
  line-height: 44px;
  font-size: 20px;
  margin-top: -10px;
  text-align: center;
  margin-right: -15px;
  background: #c9c9c9;
}

.panel-heading.active a.accordion-toggle i{
  background: #E8CE0E;
  color: #fff;
}

.panel-heading.active a.accordion-toggle.collapsed i{
  background: #E8CE0E;
  color: #fff;
}

.nav-tabs>li{
  margin-bottom: 0px;
  border-bottom: 1px solid #e6e6e6;
}

.nav-tabs{
  border-bottom: transparent;
  border-right: 1px solid #e6e6e6;
}

.nav-tabs>li>a {
  background: #f5f5f5;
  color: #666;
  border-radius: 0;
  border: 0 none;
  line-height: 24px;
  margin-right:0;
  padding: 13px 15px;
}

.nav-tabs li:last-child{
  border-bottom: 0 none;
} 

.nav-stacked>li+li{
  margin-top: 0;
}

.nav-tabs>li>a:hover{
  background: #1f1f20;
  color:#fff;
}

.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:hover, 
.nav-tabs>li.active>a:focus {
  border: 0;
  color:#fff;
  background: #1f1f20;
  position: relative;
}

.nav-tabs>li.active>a:after {
  position: absolute;
  content:  "";
  width: auto;
  height: auto;
  border-style:solid;
  border-color: transparent transparent transparent #1f1f20;
  border-width: 25px 22px;
  right: -44px;
  top:0;
}

.tab-wrap{
  border:1px solid #e6e6e6;
  margin-bottom: 20px;
}

.tab-content{
  padding: 20px;
}

.tab-content h2{
  margin-top: 0;
}

.tab-content img{
  border-radius: 4px;
}

.testimonial h2{
  margin-top: 0;
}

.testimonial-inner {
  color:#858586;
  font-size: 14px;
}

#partner {
  background: url(../images/partners/partner_bg.png) 50% 50% no-repeat;
  background-size: cover;
}

#partner {
  color: #fff;
  text-align: center;
}

#partner h2, 
#partner h3 {
  color: #fff;
}

.partners ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.partners ul li{
  display: inline-block;
  float: left;
  width: 20%;
}

.validation {
    color: red;
    display:none;
    margin: 0 0 20px;
    font-weight:400;
    font-size:13px;
}

#sendmessage {
    color: green;
    border:1px solid green;
    display:none;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}

#errormessage {
    color: red;
    display:none;
    border:1px solid red;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}

#sendmessage.show, #errormessage.show, .show {
	display:block;
}
<!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">
  <title>Gp Bootstrap Template</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

</head>

<body class="homepage">
  

  <div class="slider">
    <div class="container">
      <div id="about-slider">
        <div id="carousel-slider" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators visible-xs">
            <li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-slider" data-slide-to="1"></li>
            <li data-target="#carousel-slider" data-slide-to="2"></li>
          </ol>

          <div class="carousel-inner">
            <div class="item active">
              <img src= "https://ibb.co/n0B1kHy" class="img-responsive" alt="">
            </div>
            <div class="item">
              <img src= "https://ibb.co/F6x1BjG" class="img-responsive" alt="">
            </div>
            <div class="item">
              <img src= "https://ibb.co/F6x1BjG" class="img-responsive" alt="">
            </div>
          </div>

          <a class="left carousel-control hidden-xs" href="#carousel-slider" data-slide="prev">
						<i class="fa fa-angle-left"></i>
					</a>

          <a class=" right carousel-control hidden-xs" href="#carousel-slider" data-slide="next">
						<i class="fa fa-angle-right"></i>
					</a>
        </div>
        <!--/#carousel-slider-->
      </div>
      <!--/#about-slider-->
    </div>
  </div>
  <header id="header">
    <nav class="navbar navbar-fixed-top" role="banner">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
          <a class="navbar-brand" href="index.html">Gp.</a>
        </div>

        <div class="collapse navbar-collapse navbar-right">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="about-us.html">About Us</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact-us.html">Contact</a></li>
          </ul>
        </div>
      </div>
      <!--/.container-->
    </nav>
    <!--/nav-->

  </header>
  <!--/header-->
  <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  </body>
  </html>

7
  • 1
    Yo veo que la barra de navegacion se ve bien cuando inicias y cuando haces scroll.
    – alanfcm
    Commented el 23 ene. 2019 a las 0:21
  • 3
    El error como te dije abajo en comentarios es porque estas usando dos instancias de jquery, una en CDN y otra en local, aparte primero pides el script y luego llamas a jquery. Debe ser al reves Commented el 25 ene. 2019 a las 14:54
  • Gracias @JheymanMejia, ya solucione el problema. Hay un pequeño inconveniente, funciona lo que yo estaba buscando con tu código, pero hay que hacer scrool hacia abajo y luego hacia arriba para que se vea la imagen completa. Osea,primero se ve el 'nav'¿ Como podía solucionar eso ?
    – Diana
    Commented el 25 ene. 2019 a las 15:21
  • 1
    También me esta dando problemas en el resto de las paginas del sitio, ya que la barra de navegación se a vuelto transparente. ¿ Quizá podría corregir eso cambiando la clase del navbar de la pagina principal?
    – Diana
    Commented el 25 ene. 2019 a las 16:36
  • 1
    Puedes renombrar la clase .navbar solo en el sitio principal, yo generalmente añado un numero al final, también lo reemplazas en el CSS y el JS correspondiente Commented el 25 ene. 2019 a las 18:02

3 respuestas 3

7
+50

A petición de Mary Cruz, muestro el siguiente código basándome únicamente en la documentación oficial de Bootstrap en su versión 3 que es la que utiliza el OP.


CREACION DE NAVBAR

Tomando el código del sitio oficial creo un navbar o menú por defecto. También es obligatorio para este ejercicio el uso de jQuery, para que funcione el plugin javascript de Bootstrap (versión 1.12.4 en su momento)

<head>
<!--Botstrap 3 CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Botstrap 3 JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


AÑADIR CARRUSEL DE IMÁGENES

El siguiente paso es insertar un carrusel de imágenes, copiando el siguiente código del sitio oficial (Reemplacé las imágenes por las que usa el OP)

<head>
<!--Botstrap 3 CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<!-- Inicio Navbar-->

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<!-- Inicio Carrusel-->

<div id="myCarousel" class="carousel slide" data-ride="carousel">   

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="https://bootstrapmade.com/demo/themes/Gp/images/slider_one.jpg" alt="..." width="100%">
        <div class="carousel-caption">
          <h3>Slide 1</h3>          
        </div>
      </div>

      <div class="item">
        <img src="https://bootstrapmade.com/demo/themes/Gp/images/slider_one.jpg" alt="..." width="100%">
        <div class="carousel-caption">
          <h3>Slide 2</h3>         
        </div>
      </div>
    
      <div class="item">
        <img src="https://bootstrapmade.com/demo/themes/Gp/images/slider_one.jpg" alt="..." width="100%">
        <div class="carousel-caption">
          <h3>Slide 3</h3>          
        </div>
      </div>     
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>



<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Botstrap 3 JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Observaciones

  • Para que el carrusel sea visible, es necesario que el primer item (o uno de ellos) tenga la clase active.
  • El OP menciona que las imágenes no siempre ocupan todo el ancho de la pantalla, para eso puede añadir dentro de la etiqueta imagen el atributo width:100% (Simplificado como w-100 en las versiones posteriores de Bootstrap).
  • Usar el ancho al 100% en las imágenes puede ser un arma de doble filo, pues el carrusel tiene un alto fijo, esto cortaría la parte inferior y superior de las imágenes. Es mejor editar las imágenes con un software aparte.

NAVBAR FIJO EN LA PARTE SUPERIOR

El siguiente paso es dejar el navbar fijo. Boostrap ya cuenta con una clase para lograrlo: navbar-fixed-top. Se añade esta clase dentro de la etiqueta nav junto a las demás clases:

<nav class="navbar navbar-default navbar-fixed-top">

Ahora lo que va a suceder es que el menú al estar fijo se convierte en un elemento posicionado absolutamente, por ende, el carrusel va a quedar ubicado justo bajo el menú y al tope de la parte superior.

<head>
<!--Botstrap 3 CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<!-- Inicio Navbar-->

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<!-- Inicio Carrusel-->

<div id="myCarousel" class="carousel slide" data-ride="carousel">   

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="https://bootstrapmade.com/demo/themes/Gp/images/slider_one.jpg" alt="..." width="100%">
        <div class="carousel-caption">
          <h3>Slide 1</h3>          
        </div>
      </div>

      <div class="item">
        <img src="https://bootstrapmade.com/demo/themes/Gp/images/slider_one.jpg" alt="..." width="100%">
        <div class="carousel-caption">
          <h3>Slide 2</h3>         
        </div>
      </div>
    
      <div class="item">
        <img src="https://bootstrapmade.com/demo/themes/Gp/images/slider_one.jpg" alt="..." width="100%">
        <div class="carousel-caption">
          <h3>Slide 3</h3>          
        </div>
      </div>     
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>



<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Botstrap 3 JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


NAVBAR CON FONDO INVISIBLE Y CAMBIO DE COLOR AL HACER SCROLL

Para finalizar, el OP desea que su menú tenga un fondo transparente, y que éste cambie cuando el usuario se desplace hacia abajo en la navegación al hacer scroll.

Existen muchas y diversas maneras de hacerlo, pero la que yo propongo es usando jQuery, que ya de por si es necesario para Boostrap en este ejercicio.

Este es el código:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.navbar');

    if (scrollPos > 50) {
      navbar.addClass('alt-color');
    } else {
      navbar.removeClass('alt-color');
    }
  });
});

Podemos observar que es un simple cambio de clase, añadiendo y removiendo.

El valor de 50 en scrollPos (scrollTop) puede cambiarse.

Google Translate: ScrollTop (valor) : Establezca la posición vertical actual de la barra de desplazamiento para cada uno de los conjuntos de elementos coincidentes.

En otras palabras, deberás bajar 50 pixeles en el sitio para que se aplique el cambio de color.

Luego están las clases. A la clase navbar le dí un fondo transparente y creé una nueva clase que he llamado alt-color con fondo amarillo. Así están en el CSS

.navbar {
    background-color: transparent !important;
    -webkit-transition: all .5s;
    transition: all .5s;
}
.navbar.alt-color {
    background-color: yellow !important;
}

También añadí la propiedad transition con un valor de .5s (medio segundo), esto determina el tiempo que dura el cambio de color transparente a amarillo, creando un efecto tipo fade que es visualmente atractivo, pero no es obligatorio.


CÓDIGO FINAL

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
      navbar = $('.navbar');

    if (scrollPos > 50) {
      navbar.addClass('alt-color');
    } else {
      navbar.removeClass('alt-color');
    }
  });
});
.navbar {
  background-color: transparent !important;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.navbar.alt-color {
  background-color: yellow !important;
}
<head>
  <!--Botstrap 3 CSS-->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

</head>



<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>




<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <div class="item active">
      <img src="https://bootstrapmade.com/demo/themes/Gp/images/slider_one.jpg" alt="..." width="100%">
      <div class="carousel-caption">
        <h3>Slide 1</h3>
      </div>
    </div>

    <div class="item">
      <img src="https://bootstrapmade.com/demo/themes/Gp/images/slider_one.jpg" alt="..." width="100%">
      <div class="carousel-caption">
        <h3>Slide 2</h3>
      </div>
    </div>

    <div class="item">
      <img src="https://bootstrapmade.com/demo/themes/Gp/images/slider_one.jpg" alt="..." width="100%">
      <div class="carousel-caption">
        <h3>Slide 3</h3>
      </div>
    </div>

  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


<div style="min-height:600px;">
</div>


<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Botstrap 3 JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

PD: Gracias al usuario @abney317 que me ayudó a ver mi error en el script.

1
  • 1
    Gracias por tu esfuerzo y apoyo para ayudarme a conseguirlo @JheymanMejia, has sido muy amable. Gracias por tu tiempo.
    – Diana
    Commented el 25 ene. 2019 a las 20:10
3

para lograr eso tienes que realizar 2 tareas sencillas

1 - Esconder por defecto el header (navbar)

2 - Detectar el scroll de la pagina con js para mostrar/ocultar el header

Esta es la pequeña funcion JS que detecta la posicion del scroll y muestra/esconde el header

<script type="text/javascript">
        var BodyScroll = function () {
            if($(document).scrollTop() != 0)
                $("#header").css("display","block");
            else
                $("#header").css("display","none");
        }
</script>

Tambien te he comentado en el css que es mejor usar el background de un elemento que un elemento img para los carrousel, pero ambas funcionan igual de bien, eso depende de como quieras usar tu plantilla y en que entorno se encuentra.

A parte te comento que para hacer que un elemento ocupe el 100% de la página sin margenes ni padding, no debes de usar ni .container ni .row ni .col dado que todos estos elementos de bootstrap añaden por defecto margenes y paddings y por ende deberías de sobreescribir susodichas clases, en tu caso tan solo tienes que dejar de usar la clase .container.

Siempre puedes usar la consola de los navegadores para ver que css se esta aplicando para cada elemento y ver de que clase css proviene. Se abre con F12 o Ctrl+Shift+C || Ctrl+Mayús+C

  @import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800);

body, html {
width: 100%;
height: 100%;
}

body {
  background: #fff;
  font-family:'Open Sans', Arial, sans-serif;
  color:#333;
  line-height:1.6em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-weight:500; 
font-family:'Open Sans', Arial, sans-serif;
color:#333;
}

h1{
  font-size: 36px;
  color:#fff;
}

h2{
  font-size: 20px;
}

h3{
  font-size: 16px;
  color: #787878;
  font-weight: 400;
  line-height: 24px;
}

/*Tienes que indicar una altura fija para que al cambiar de imagen el carrousel no se dimensione*/
.carousel-inner{
height: 500px;
}

/*Para centrar las imagenes en el carrousel como imagenes que ocupan el 100% de la pagina, debes de sobreescribir la clase img-responsive de bootstrap*/
.carousel-inner .item img {
width: 100% !important;
height: 500px !important;/*Misma altura que carousel-inner*/
}

/* Yo te recomiendo que antes que usar el elemento img, uses un div y le pongas background-image: url(http://xxx); bacground-position: center; bacground-repeat: no-repeat; background-size: cover; */


/*Esconder header por defecto*/
#header {
display: none;
}
<!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">
  <title>Gp Bootstrap Template</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- Para usar bootstrap debes de usar jquery-->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<!-- Hay que detectar el scroll del body y mostrar/esconder el #header segun la posicion del scroll -->
<script type="text/javascript">
	var BodyScroll = function () {
		if($(document).scrollTop() != 0)
			$("#header").css("display","block");
		else
			$("#header").css("display","none");
	}
</script>
</head>

<body class="homepage" onscroll="BodyScroll()">
  

  <div class="slider">
<div class=""><!-- Container te añade una mida fija y los margenes, por eso tus probleams-->
  <div id="about-slider">
    <div id="carousel-slider" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators visible-xs">
        <li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-slider" data-slide-to="1"></li>
        <li data-target="#carousel-slider" data-slide-to="2"></li>
      </ol>

      <div class="carousel-inner">
        <div class="item active">
          <img src= "https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA5OS83NTgvb3JpZ2luYWwvc3RhcnMtdW5pdmVyc2UuanBn" class="img-responsive" alt="">
        </div>
        <div class="item">
          <img src= "http://blogs.discovermagazine.com/crux/files/2017/06/universe.jpg" class="img-responsive" alt="">
        </div>
        <div class="item">
          <img src= "https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2017/neutrinofaci.jpg" class="img-responsive" alt="">
        </div>
      </div>

      <a class="left carousel-control hidden-xs" href="#carousel-slider" data-slide="prev">
					<i class="fa fa-angle-left"></i>
				</a>

      <a class=" right carousel-control hidden-xs" href="#carousel-slider" data-slide="next">
					<i class="fa fa-angle-right"></i>
				</a>
    </div>
    <!--/#carousel-slider-->
  </div>
  <!--/#about-slider-->
</div>
  </div>
  <header id="header">
<nav class="navbar navbar-fixed-top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
      <a class="navbar-brand" href="index.html">Gp.</a>
    </div>

    <div class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about-us.html">About Us</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact-us.html">Contact</a></li>
      </ul>
    </div>
  </div>
  <!--/.container-->
</nav>
<!--/nav-->

  </header>
  <!--/header-->
  <!-- añadir height a la pagina para probar scroll -->
  <div style="height: 2000px">
  </div>
  </body>
  </html>

9
  • 2
    Si, tienes algun div que ocupa mas del width de la pantalla, por eso el scroll horizontal, hay que detectar qual es usando la consola del navegador, como te he explicado antes. Si tienes problemas con el css, puedes actualizar tu pregunta y te ayudamos
    – Arngue
    Commented el 24 ene. 2019 a las 7:32
  • 1
    @Diana remueve el div que se queda sin classe, yo lo dejé ahi porque desde mi firefox no me pasa y para dejarte el comentario del container
    – Arngue
    Commented el 24 ene. 2019 a las 17:19
  • 1
    Hola @Diana, veo que editaste tu pregunta pero (creo) no veo el código actualizado, si quieres puedes probar de hacer un jsfiddler y miro cual es realmente el problema que tienes y te explico porqué pasa.
    – Arngue
    Commented el 25 ene. 2019 a las 11:48
  • 1
    @Diana veo varias cosas en tu jsfiddle, estás ejecutando primero el script del cambio de color y luego estás llamando dos veces jQuery, primero con CDN y luego en local. Revisa esa falla en tu proyecto y nos cuentas Commented el 25 ene. 2019 a las 14:47
  • 1
    Estás haciendo lo mismo con Bootstrap, lo estas llamando dos veces, en CDN y en local. Como recomendación yo incluiría todos los scripts en un archivo .js separado y no dentro del html. Revisa en tu jsfiddle las lineas 592-594 son iguales a 597-598 Commented el 25 ene. 2019 a las 14:50
1

Proba poniendo en el nav la clase fixed-top para que quede en el tope o fixed-bottom para quede en el bottom

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

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.