2

Mi navbar con Dropdown funcionó correctamente hasta que decidí subir el carousel al tope de la misma, además, al slider le superpuse el logo, que quiero centrado. Agradezco cualquier orientación. Mi CSS:

.logo {
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    margin: 0 auto;
    z-index: 9999999;
}

.hero-slide {
    margin-top: -180px;
}

Disculpen los errores, deben ser abismales. Mi HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel= "stylesheet">
<link href="css/styles.css" rel= "stylesheet">
    <title>Mi página</title>
<style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
</style>
</head>

<body>
<!--EMPIEZA BARRA DE NAVEGACIÓN-->
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <a href="#" class="navbar-brand">Custom Shop</a>
            <button class="navbar-toggle" data-toggle= "collapse" data-target= ".navHeaderCollapse">
                <span class="icon-bar"></span> <!--rayas del icon menu-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Artists</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Instagram</a></li>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Facebook</a></li>
                            <li><a href="#">YouTube</a></li>
                        </ul>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
                </li>
                </ul>
                </div>
                </div>
                </div>
<!--TERMINA BARRA DE NAVEGACIÓN-->
<div class="container">
    <div class="row">
        <center>
            <div class="logo">
                <img src="img/logo.png" class="img-responsive">
            </div>
        </center>
    </div>
</div>

<!--carrusel-->
<div class="container-fluid hero-slide">
  <div class="row">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img/img-1.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="img/img-2.jpg" alt="Chania2" width="460" height="345">
      </div>

      <div class="item">
        <img src="img/img-3.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="img/img-4.jpg" alt="Flower2" width="460" height="345">
      </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>
</div>
<!--fin del carrusel-->

<div class="container">
    <div class="row">
        <div class="friends">
            <span class="glyphicon glyphicon-star"></span> Friends 
            <span class="glyphicon glyphicon-star"></span> Friends
            <span class="glyphicon glyphicon-star"></span> Friends
            <span class="glyphicon glyphicon-star"></span> Friends
        </div>
    </div>
</div>

<!--FOOTER-->
             <div class="navbar navbar-inverse navbar-fixed-bottom">

                 <div class="container">
                     <p class="navbar-text">Site built by ...</p>
                 </div>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
6
  • Bien, estoy bastante liada para agregar el html. Estoy editando el post y cada vez se entiende menos. :( Gracias @Mariano por atenderme.
    – Carri
    el 16 abr. 2017 a las 15:55
  • Mil Gracias, apenas empiezo con todo esto y me enredo bastante. @Mariano
    – Carri
    el 16 abr. 2017 a las 16:00
  • Buenas. ¿Cuál es el error con exactitud? ¿Puedes poner una imagen para ver el problema?
    – gugadev
    el 16 abr. 2017 a las 16:13
  • 1
    Pues me muero de la vergüenza, acabo de abrir para hacer la captura de pantalla y mostrarles el error y al parecer mi menú funciona correctamente. :O ¿Puede ser unproblema de mi navegador entonces? Por favor disculpen y gracias por su tiempo y atención. Ayer esto no funcionaba con nada. Gustavo y @Mariano ¡GRACIAS!
    – Carri
    el 16 abr. 2017 a las 16:34
  • 1
    Muchísimas gracias, de verdad, es bueno saber a quién acudir. @Mariano Vale, ¡a cerrar!
    – Carri
    el 16 abr. 2017 a las 16:41

0

Examina otras preguntas con la etiqueta o formula tu propia pregunta.