Menu
I have a problem with Twitter's bootstrap. I want to use box-shadow for my project but it doesn't work. When I put the box-shadow command under the relevant class in the css file nothing happens.
It should work like the picture, that the shadow is under the header, navbar, and the content.
* {
border-radius: 0 !important;
-moz-border-radius: 0 !important;
}
.navbar-header {
height: 247px;
background: black;
-webkit-box-shadow: 7px 7px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 2px 0px rgba(50, 50, 50, 0.75);
}
.navbar {
height: 74px;
background: #F7a717;
/* Muss überschrieben werden, sonst ist ein Abstand zwischen den Spalten */
margin: 0px;
position: relative;
}
.nav {
font-size: 26px;
}
.nav li {
display: inline-block;
}
.nav li a:hover {
background: yellow;
color: white;
}
.content {
height: 954px;
background: #eff3fb;
}
.footer {
height: 284px;
background: #254175;
}<!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>Track DB</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 navbar-header">
</div>
</div>
<div class="row">
<div class="col-md-8 navbar navbar-left drop-shadow">
<ul class=" nav">
<li><a href="#">Navigation1</a></li>
<li><a href="#">Navigation2</a></li>
<li><a href="#">Navigation3</a></li>
<li><a href="#">Navigation4</a></li>
</ul>
</div>
<div class="col-md-3 navbar">
<form class="navbar-form navbar-left" role="search">
<input type="text" name="search" class="form-control input-lg" id="search" placeholder="Search">
</form>
</div>
<div class="col-md-1 navbar navbar-right drop-shadow">
</div>
</div>
<div class="row">
<div class="col-md-12 content"></div>
</div>
<div class="row">
<div class="col-md-12 footer">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
645
I am not going to format your grid. That I will leave upto you. But as far as shadow's are concerned, just use higher z-index on top level divs.
http://jsfiddle.net/f8mrno19/1/
.navbar-header {
z-index:9999;
height: 247px;
background: black;
-webkit-box-shadow: 7px 7px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 2px 0px rgba(50, 50, 50, 0.75);
}
.drop-shadow{
box-shadow: 0px 7px 5px #888888;
z-index:999;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With