Estoy intentando agregar una sombra paralela a mi barra de navegación que tengo a través de Bootstrap, pero parece que no puedo resolverlo. Tal vez alguien pueda indicarme la dirección correcta. Todas las otras preguntas que he visto que se han hecho sobre un tema similar tienen respuestas increíblemente largas de código desordenado, pero tiene que haber una manera simple de hacerlo, ¿no es ese el objetivo de Bootstrap después de todo?
Aquí está mi HTML relacionado con mi navegación:
<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="https://stackoverflow.com/questions/14904731/index.html">eService</a>
<div class="nav-collapse">
<ul class="nav pull-right">
<li><a href="https://stackoverflow.com/questions/14904731/index.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Services
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Stage Design & Build</a></li>
<li><a href="#">Event Planning & Management</a></li>
<li><a href="#">Video Production</a></li>
<li><a href="#">Audio Production</a></li>
<li><a href="#">Lighting Production</a></li>
</ul>
</li><!-- dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Events
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Corporate Events</a></li>
<li><a href="#">Civic Events</a></li>
<li><a href="#">Charity Events</a></li>
<li><a href="#">Grand Openings</a></li>
<li><a href="#">Concerts</a></li>
</ul>
</li><!-- dropdown -->
</ul><!-- /.nav -->
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
Y aquí está mi CSS relacionado con la barra de navegación:
#custom-nav {
-webkit-box-shadow: 20px 20px 20px #FC0;
-moz-box-shadow: 20px 20px 20px #FC0;
box-shadow: 20px 20px 20px #FC0;
z-index:999;
}
Soy consciente de que con las dimensiones px actuales que he establecido para mi sombra, aparecerá como un bloque sólido. Planeo ajustarme una vez que pueda hacer que esto funcione. Gracias por cualquier ayuda o sugerencias.
Mucho amor.
moeabdol
En su css agregue lo siguiente a su regla de clase .navbar
.navbar {
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
/* the rest of your styling */
}
EDITAR
Existe una increíble herramienta en línea para generar código de sombra de cuadro (gracias a la gente de cssmatic.com). Puede ajustar la apariencia de su sombra y generará todo el código necesario más cualquier prefijo de navegador específico (webkit, mozilla, etc.). Luego puede copiar el código en su css.
http://www.cssmatic.com/box-sombra
También puede encontrar otros efectos css en el mismo sitio.
Para mantener la sombra en su barra de navegación, simplemente ajuste las propiedades de la sombra del cuadro
.navbar{
box-shadow: 0px 8px 8px -6px rgba(0,0,0,.5);
}
Aquí el primero 0px es hacer que la sombra en el centro se ajuste para obtener la sombra derecha e izquierda
después, 8px es para la altura de la sombra
después 8px y -6px es para dureza y opacidad de la sombra
(0,0,0,0.5) es simple rgba (rojo, verde, azul, alfa) colores y alfa, es para mantener transparencia de la sombra va 0.0(totalmente transparente) a 1.0(totalmente opaco)
andresl64
El marcado de la barra de navegación es un poco diferente del marcado predeterminado de la barra de navegación de Bootstrap, por ejemplo,
Envolviste toda tu barra de navegación en una clase llamada navbar-inner en lugar de envolver la palanca y la marca dentro de un navbar-header class seguido de los elementos de menú colapsables después.
Así es como debería verse su marcado:
<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-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="#">eService</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="https://stackoverflow.com/questions/14904731/index.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Services
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Stage Design & Build</a></li>
<li><a href="#">Event Planning & Management</a></li>
<li><a href="#">Video Production</a></li>
<li><a href="#">Audio Production</a></li>
<li><a href="#">Lighting Production</a></li>
</ul>
</li><!-- dropdown -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Events
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Corporate Events</a></li>
<li><a href="#">Civic Events</a></li>
<li><a href="#">Charity Events</a></li>
<li><a href="#">Grand Openings</a></li>
<li><a href="#">Concerts</a></li>
</ul>
</li><!-- dropdown -->
</ul><!-- /.nav -->
</div>
</div>
Aquí hay un jsfiddle con los códigos anteriores: https://jsfiddle.net/AndrewL32/e0d8my79/36/
También,
mantenga su archivo css personalizado abajo su archivo css de arranque para evitar que sus estilos sean sobrescritos por el estilo predeterminado de arranque.
<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/14904731/bootstrap.css"> <!--call your bootstrap first-->
<link rel="stylesheet" type="text/css" href="mystyle.css"><!-- followed by your custom css after-->
Está funcionando. No estoy muy seguro de qué es exactamente lo que necesita?
– OliverP
16 de febrero de 2013 a las 0:54
@F0rgiven Tiene razón, lo acabo de probar en JSFiddle y este código en particular funciona, pero cuando lo pruebo en mi navegador con todo el código de Bootstrap, no funciona. Debe haber un estilo que necesito anular, pero no puedo averiguar qué estilo es.
– Brian
16 de febrero de 2013 a las 1:21
¿Qué navegador estás usando? Y muéstrenos su código HTML completo si es posible para que podamos ver si algo más está mal.
– OliverP
17 de febrero de 2013 a las 7:39
Oye, Brian, ¿resolviste esto? Todavía no pude resolver este problema. ¿Puede compartir los cambios que ha realizado?
– Josyula Krishna
26 de septiembre de 2013 a las 5:26
por favor pegue el violín, el mío usó sombra y funcionó muy bien
– Daniel Cheung
26 de enero de 2014 a las 4:25