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][1] 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][2]) <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <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> <!-- end snippet --> ---------- **AÑADIR CARRUSEL DE IMÁGENES** El siguiente paso es insertar un carrusel de imágenes, [copiando el siguiente código del sitio oficial][3] (Reemplacé las imágenes por las que usa el OP) <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <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> <!-- end snippet --> > **Observaciones** > > - Para que el carrusel sea visible, es necesario que el primer item (o uno de ellos) [tenga la clase `active`.][3] > - 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][4] 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][5]. 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][6], por ende, el carrusel va a quedar ubicado justo bajo el menú y al tope de la parte superior. Esto se soluciona aplicando un valor a la [propiedad `top`][7] en la clase `carousel`. Pero, ¿Cuánto debería ser este valor? Bootstrap define en las propiedades de su `navbar` un `min-height: 50px;` es decir, el alto mínimo del menú es de 50px, este será el valor que le aplicaremos a la propiedad `top`. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .carousel{ top: 50px !important; } <!-- language: lang-html --> <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> <!-- end snippet --> ---------- **NAVBAR 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][8] y [removiendo][9]. El valor de `50` en `scrollPos` ([scrollTop][10]) 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][11] 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][12] 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** <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 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'); } }); }); <!-- language: lang-css --> .navbar { background-color: transparent !important; -webkit-transition: all .5s; transition: all .5s; } .navbar.alt-color { background-color: yellow !important; } .carousel { top: 50px; } /* Ignorar: Solo a modo de prueba */ .texto-ejemplo { width: 10%; margin: 0 auto; margin-top: 100px; } <!-- language: lang-html --> <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 alt-color"> <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> <!-- Este código solo es un relleno para que el scroll vertical funcione a modo de demostración--> <section> <div class="texto-ejemplo"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue velit, vehicula eu pretium in, semper sit amet sem. Suspendisse tortor quam, tincidunt id nisi ut, hendrerit sodales lectus. Proin quis mauris id arcu molestie euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </div> </section> <!--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> <!-- end snippet --> PD: Acabo de notar que el snippet arranca con el fondo amarillo, pero sólo aquí en el sitio, si se mueve hasta arriba se soluciona. Visualizar en pantalla completa. [1]: https://getbootstrap.com/docs/3.3/components/#navbar [2]: https://getbootstrap.com/docs/3.3/getting-started/#template [3]: https://getbootstrap.com/docs/3.3/javascript/#carousel [4]: https://getbootstrap.com/docs/4.2/layout/grid/#equal-width-multi-row [5]: https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top [6]: https://developer.mozilla.org/es/docs/Web/CSS/position [7]: https://developer.mozilla.org/es/docs/Web/CSS/top [8]: https://api.jquery.com/addclass/ [9]: https://api.jquery.com/removeclass/ [10]: https://api.jquery.com/scrollTop/ [11]: https://developer.mozilla.org/es/docs/Web/CSS/background-color [12]: https://developer.mozilla.org/es/docs/Web/CSS/Transiciones_de_CSS