So this site I'm working in has to have a background (Clients wants it, I hate it..) I have made the navbar transparent so the background image show behind it. Now id like to add in a carousel that is below the navbar and doesn't overlap in anyway. I still need the image background image behind the navbar this is what i have so far:
/*!
Main Page CSS || Created By Thomas Withers @ Ice7Media
*/
/* Global Styles
============================================================ */
html {
background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
color: #000;
}
h1,
h2,
h3,
h4,
h5 {
font-family: 'Oswald', 'Open Sans', sans-serif;
color: #000;
}
p {
font-family: 'Open Sans', sans-serif;
color: #000;
}
/* Global Navbar Formatting
==============================================================*/
.navbar {
padding-bottom: 10px;
}
.navbar ul {
margin-top: 20px;
}
.navbar.transparent.navbar-default {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
/* Global Footer Formatting
==============================================================*/
/* Home Page Formatting
==============================================================*/
/*Full Width Slider Formatting */
/* Carousel base class */
.carousel {
padding-top: 100px;
height: 100%;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color:#bbb;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100%;
}
/* Menu's Page Formatting
==============================================================*/
/* E-Club Page Formatting
==============================================================*/
/* Events Page Formatting
==============================================================*/
/* Contact Page Formatting
==============================================================*/<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta charset
===================================================================================-->
<meta charset="utf-8">
<!-- Title
===================================================================================-->
<title>Bocaditio | South Amercian Dishes</title>
<!-- Meta Tags
===================================================================================-->
<meta name="author" content="Thomas Withers @ Ice7Media">
<meta name="description" content="Social Media Wizzards that handle all of your social media markerting.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- CSS Stylesheets
===================================================================================-->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/Custom.css" rel = "stylesheet">
<link href = "css/Mapstyle.css" rel = "stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="shortcut icon" href="img/iceBox.png">
<!-- Custom Fonts
===================================================================================-->
<link rel="stylesheet" href=".4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="+Slab">
<link href='+Sans' rel='stylesheet' type='text/css'>
<link href=':400,300,700' rel='stylesheet' type='text/css'>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation
===================================================================================-->
<div class = "navbar transparent navbar-default navbar-fixed-top">
<div class = "container">
<a href = "index" class = "navbar-brand">
<img src="img/BocaditoLogo.png">
</a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<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><a href = "index.html">Home</a></li>
<li><a href = "about.html">Menus</a></li>
<li><a href = "e-clubs.html">E-Clubs</a></li>
<li><a href = "contact.php">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- Full screen Slider
===================================================================================-->
<div id="myCarousel" class="carousel slide">
<!-- 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>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="/assets/example/bg_suburb.jpg" class="fill">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p><a class="btn btn-lg btn-primary" href="">Learn More</a>
</div>
</div>
</div>
<div class="item">
<img src="">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have pletely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<!-- Abouts Us & Logo
===================================================================================-->
<!-- Top Dishes
===================================================================================-->
<!-- footer
===================================================================================-->
<!-- Scripts
===================================================================================-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src=""></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/main.js"></script>
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>So this site I'm working in has to have a background (Clients wants it, I hate it..) I have made the navbar transparent so the background image show behind it. Now id like to add in a carousel that is below the navbar and doesn't overlap in anyway. I still need the image background image behind the navbar this is what i have so far:
/*!
Main Page CSS || Created By Thomas Withers @ Ice7Media
*/
/* Global Styles
============================================================ */
html {
background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
color: #000;
}
h1,
h2,
h3,
h4,
h5 {
font-family: 'Oswald', 'Open Sans', sans-serif;
color: #000;
}
p {
font-family: 'Open Sans', sans-serif;
color: #000;
}
/* Global Navbar Formatting
==============================================================*/
.navbar {
padding-bottom: 10px;
}
.navbar ul {
margin-top: 20px;
}
.navbar.transparent.navbar-default {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
/* Global Footer Formatting
==============================================================*/
/* Home Page Formatting
==============================================================*/
/*Full Width Slider Formatting */
/* Carousel base class */
.carousel {
padding-top: 100px;
height: 100%;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color:#bbb;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100%;
}
/* Menu's Page Formatting
==============================================================*/
/* E-Club Page Formatting
==============================================================*/
/* Events Page Formatting
==============================================================*/
/* Contact Page Formatting
==============================================================*/<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta charset
===================================================================================-->
<meta charset="utf-8">
<!-- Title
===================================================================================-->
<title>Bocaditio | South Amercian Dishes</title>
<!-- Meta Tags
===================================================================================-->
<meta name="author" content="Thomas Withers @ Ice7Media">
<meta name="description" content="Social Media Wizzards that handle all of your social media markerting.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- CSS Stylesheets
===================================================================================-->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/Custom.css" rel = "stylesheet">
<link href = "css/Mapstyle.css" rel = "stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="shortcut icon" href="img/iceBox.png">
<!-- Custom Fonts
===================================================================================-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis./css?family=Roboto+Slab">
<link href='https://fonts.googleapis./css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis./css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation
===================================================================================-->
<div class = "navbar transparent navbar-default navbar-fixed-top">
<div class = "container">
<a href = "index" class = "navbar-brand">
<img src="img/BocaditoLogo.png">
</a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<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><a href = "index.html">Home</a></li>
<li><a href = "about.html">Menus</a></li>
<li><a href = "e-clubs.html">E-Clubs</a></li>
<li><a href = "contact.php">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- Full screen Slider
===================================================================================-->
<div id="myCarousel" class="carousel slide">
<!-- 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>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="/assets/example/bg_suburb.jpg" class="fill">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.">Learn More</a>
</div>
</div>
</div>
<div class="item">
<img src="http://lorempixel./1500/600/abstract/1">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have pletely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<!-- Abouts Us & Logo
===================================================================================-->
<!-- Top Dishes
===================================================================================-->
<!-- footer
===================================================================================-->
<!-- Scripts
===================================================================================-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="https://maps.googleapis./maps/api/js?key=AIzaSyC22aNgIjcYzx5Oel1m0Jtcem-W4R895fQ"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/main.js"></script>
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>As you can see my desired affect is not being achieved any help will be appreciated!
Share Improve this question asked Sep 8, 2015 at 10:18 Tom WithersTom Withers 1,1815 gold badges16 silver badges29 bronze badges2 Answers
Reset to default 4Just add a margin-top to your body equivalent to your navbar height like this:
body {
margin-top: 50px;
}
N.B. Replace 50px with height of your navbar.
Use the z index style on the division containing your nav bar and also on the division containing your carousel. This is how you'll put it:
This one goes to the div containing your navbar:
style="z-index:10;"
and this one goes to the div containing your carousel:
style="z-index:5;"