Bootstrap carousel under navbar
Question
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.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab"> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/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.com">Learn More</a> </div> </div> </div> <div class="item"> <img src="http://lorempixel.com/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 completely 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.com/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!
2 answers
solution1
4 ACCPTED 2015-09-08 10:19:33
Just add a margin-top to your body equivalent to your navbar height like this:
body {
margin-top: 50px;
}
NB Replace 50px with height of your navbar.
solution2
0 2020-07-02 20:02:44
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;"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap 3 carousel and navbar not working
Bootstrap Carousel component overlaps with navbar
Can't get Carousel to be visible under navbar in Bootstrap (v3.3.4) on IE
Issues getting a center navbar on bootstrap carousel
how to fixed a navbar and Carousel image slider in bootstrap
Modal Bootstrap blocks other JavaScript (carousel and navbar)
Make bootstrap carousel directly below navbar
Bootstrap carousel-control is getting under an image
Add motion blur to navbar text when Bootstrap carousel sliding
How to make Bootstrap Carousel stay fixed right below navbar?
Related Tags