i have a header with a navbar and a Carousel sliding image using bootstrap
how can i fixed this two together on scroll
when the user scroll the website to see the information the navbar and carousel still fixed on the top and the information scroll under the header
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About Us
</li>
<li>
Services
</li>
<li>
Factory
</li>
<li>
Projects
</li>
<li>
Clients
</li>
<li>
Video
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="row">
<img src="img/logo%20corner.png" class="center-block img-responsive imglogo">
</div>
<!-- Full Page Image Background Carousel Header -->
<header 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>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slide1.jpg');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slide2.jpg');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/slide3.jpg');"></div>
<div class="carousel-caption">
</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>
</header>
If i have understood I give you a link where you can find your happiness.
http://www.w3schools.com/howto/howto_css_parallax.asp
Hope help you :)
I added the full code for you to have as a resource to reference with your document because what you posted is the stock bootstrap template with no input. Double check and make sure you have the latest bootstrap installed and are linking the files correctly. Below I used a CDN, but its better to have it downloaded.
The main thing to make sure you have the fixed header navigation is the following code:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
You can find the above code in the below code. Let me know if you have any questions.
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-toggle" 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="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /container -->
</div>
<!-- /navbar wrapper -->
<!-- Carousel -->
<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>
<div class="carousel-inner">
<div class="item active">
<img src="/root/directory/file_path.jpg" class="fill">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small="">
<p></p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p>
</pthis>
</div>
</div>
</div>
<div class="item">
<img src="/root/directory/file_path.jpg" class="fill">
<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>
</body>
</html>
Related
I am following the Bootstrap code snippet page to create the following carousel. It has three images and the controls are supposed to slide left are right. The scripts that I am using are shown in the <script> tags at the bottom of the file.
<!doctype html>
<head>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Wantrepreneur</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- Page Content -->
<section class="py-5">
<div class="container">
<h1 class="display-4">Full Page Image Slider</h1>
<p class="lead">The background images for the slider are set directly in the HTML using inline CSS. The images in this snippet are from Unsplash, taken by Joanna Kosinska!</p>
</div>
</section>
<script src="js/vendor/bootstrap.bundle.min.js"></script>
<script src="js/vendor/jquery.slim.min.js"></script>
</html>
However, when I press either of the controls, the link in my browser changes from link.com to link.com#carouselExampleIndicators, but nothing happens and the images don't slide/change. What should I do to fix this?
Thanks,
Vinny
This is a simple script order issue. Bootstrap needs jQuery, but you are loading Bootstrap before jQuery. Switch the order:
<script src="js/vendor/jquery.slim.min.js"></script>
<script src="js/vendor/bootstrap.bundle.min.js"></script>
Before release of bootstrap 5,
In Bootstrap < 5 is dependent on jQuery:-
so, you have to maintain the order of the external scripts in your html code:-
It should be:-
<script src="js/vendor/jquery.slim.min.js"></script>
<script src="js/vendor/bootstrap.bundle.min.js"></script>
I have the following problem:
I want to implement a Carousel with Bootstrap version 3.3.7 on my website. The code looks like this:
<!-- Carousel
================================================== -->
<div class="row dark-start d-none d-lg-block">
<div class="col-md-12">
<div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
<li data-target="#categoryExampleSlider" data-slide-to="1"></li>
<li data-target="#categoryExampleSlider" data-slide-to="2"></li>
<li data-target="#categoryExampleSlider" data-slide-to="3"></li>
<li data-target="#categoryExampleSlider" data-slide-to="4"></li>
<li data-target="#categoryExampleSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../imgs/slider1_sport.jpg" alt="sport">
</div>
<div class="item">
<img src="../imgs/slider2_outdoor.jpg" alt="outdoor">
</div>
<div class="item">
<img src="../imgs/slider3_senioren.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider4_ass.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider5_risiko.jpg" alt="risiko">
</div>
<div class="item">
<img src="../imgs/slider6_rettervideo.jpg" alt="rettervideo">
</div>
</div>
<a class="left carousel-control" href="#categoryExampleSlider" 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="#categoryExampleSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
</div>
The controls and the indicators are displayed but it does not rotate. Neither automatically nor when I click on the controls and/or indicators.
What am I doing wrong here?
Try with bootstrap 3.4.0 version. You need to change the version. It absolutely works. This example is useful for u.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row dark-start d-none d-lg-block">
<div class="col-md-12">
<div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
<li data-target="#categoryExampleSlider" data-slide-to="1"></li>
<li data-target="#categoryExampleSlider" data-slide-to="2"></li>
<li data-target="#categoryExampleSlider" data-slide-to="3"></li>
<li data-target="#categoryExampleSlider" data-slide-to="4"></li>
<li data-target="#categoryExampleSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="public/images/1.svg" alt="sport">
</div>
<div class="item">
<img src="public/images/1.svg" alt="outdoor">
</div>
<div class="item">
<img src="public/images/1.svg" alt="ass">
</div>
<div class="item">
<img src="public/images/1.svg" alt="ass">
</div>
<div class="item">
<img src="public/images/1.svg" alt="risiko">
</div>
<div class="item">
<img src="public/images/1.svg" alt="rettervideo">
</div>
</div>
<a class="left carousel-control" href="#categoryExampleSlider" 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="#categoryExampleSlider" 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>
</body>
</html>
#premox this is your exact answer I didn't change anything except writing CDN links and your good to go:
Check below snippet copied you exact code.
By this I guess you have wrong jquery link in your code.
.item {
height : 400px;
width : 400px;
border: 1px solid red;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row dark-start d-none d-lg-block">
<div class="col-md-12">
<div id="categoryExampleSlider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#categoryExampleSlider" data-slide-to="0" class="active"></li>
<li data-target="#categoryExampleSlider" data-slide-to="1"></li>
<li data-target="#categoryExampleSlider" data-slide-to="2"></li>
<li data-target="#categoryExampleSlider" data-slide-to="3"></li>
<li data-target="#categoryExampleSlider" data-slide-to="4"></li>
<li data-target="#categoryExampleSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../imgs/slider1_sport.jpg" alt="sport">
</div>
<div class="item">
<img src="../imgs/slider2_outdoor.jpg" alt="outdoor">
</div>
<div class="item">
<img src="../imgs/slider3_senioren.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider4_ass.jpg" alt="ass">
</div>
<div class="item">
<img src="../imgs/slider5_risiko.jpg" alt="risiko">
</div>
<div class="item">
<img src="../imgs/slider6_rettervideo.jpg" alt="rettervideo">
</div>
</div>
<a class="left carousel-control" href="#categoryExampleSlider" 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="#categoryExampleSlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
</div>
I am using a navbar and a subnav under a Carousel. And my subnav should be fixed after getting there. It is fixed but content is jumping.
if i only would use a container above i would already have found a solution but it don't work for me, so its still jumping..
I already saw some solutions but don't get it..
so what am i doing false?
https://jsfiddle.net/sdkpj9f3/
.navbar {
margin-bottom: 0;
}
#myCarousel {
padding: 0px;
}
.subnav {
margin: 0px;
top: 0px;
background: rgba(85, 93, 106, 0.7);
border-style: none;
}
.subnav.affix {
position: fixed;
top: 0;
width: 100%;
}
.subNav-item:hover {
font-size: 20px;
background: rgba(111, 131, 158, 0.2);
}
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top navtop">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navtop">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--LOGO-->
<a href="index.html" class="">
<img src="images/logos/RULogo.png" style="height: 50px; width: 50px;">
</a>
</div>
<!--NAV START-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li class="">Gallery
</li>
<li class="">Shop
</li>
<li class="">Blog
</li>
<li class="">About & Contact
</li>
</ul>
</div>
<!--NAV END-->
</nav>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/picture3.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Welcome</h1>
<h2>kjlkjkl</h2>
</div>
</div>
<div class="item">
<a href="contact.html" class="no-link">
<img src="images/picture1.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Who?</h1>
</a>
<h2>Developers</h2>
</div>
</div>
</div>
<!-- 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>
<!--SlideShow END-->
<!--SubNav-->
<nav class="navbar subnav" role="navigation">
<div class="collapse navbar-collapse collapse-buttons">
<ul class="nav navbar-nav navbar-right">
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
</ul>
</div>
</nav>
<!--END SUbnav-->
<div id="Code" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
<div class="col-sm-4">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div id="portfolio" class="container-fluid text-center">
<h2>Portfolio</h2>
<br>
<h4>What we have created</h4>
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture1.jpg" alt="Paris" width="400" height="300">
<p><strong>bla blaa</strong>
</p>
<p>blablablabll lbalabl lab lab</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture2.jpg" alt="New York" width="400" height="300">
<p><strong>blablabla</strong>
</p>
<p>blablabalbalbala</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture3.jpg" alt="San Francisco" width="400" height="300">
<p><strong>blablabalbal</strong>
</p>
<p>bla, blabla bla ba</p>
</div>
</div>
</div>
<br>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var h = $('.navtop').height();
var h2 = $('#myCarousel').height();
var h3 = h + h2;
$('.subnav').affix({
offset: {
top: 1200
}
});
</script>
<body>
</html>
Usually when the site jumps from affix, it's because the header becomes position fixed and leaves the layout and is position on top of the content itself. The rest of the site "jumps" up the height of the header.
One thing you can do is wrap your navbar in a wrapper and give the navbar wrapper the height of the nav.
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse navbar-static-top navtop">
<!-- the rest of your nav code is here -->
</nav>
</div>
and in css
.navbar-wrapper { height:60px; } /* or whatever the height of the nav is */
You can find the height of your nav by using the browser inspector or by guessing until the jump disappears.
Here is your Jsfiddle, cleaned up a bit so it works.
I am creating a page with a bootstrap carousel and w3.css fixed top navigation bar. Then suddenly when I scroll down the page the indicators of the carousel is overlapping my top navigation.
Here is the picture of the current problem with a red arrow
Here is my code for my top navigation bar
<script>
window.onscroll = function() {scrollFunc()};
function scrollFunc() {
if (document.body.scrollTop > 130 || document.documentElement.scrollTop > 130) {
document.getElementById("myTop").classList.add("w3-cyan","w3-card-4");
document.getElementById("myIntro").classList.add("w3-show-inline-block");
} else {
document.getElementById("myIntro").classList.remove("w3-show-inline-block");
document.getElementById("myTop").classList.remove("w3-cyan","w3-card-4");
}
}
</script>
<div id="myTop" class="w3-top w3-container w3-padding-2 w3-theme w3-large">
<!-- <i class="w3-opennav w3-hide-large w3-xlarge w3-margin-left w3-margin-right" onclick="w3_open()"></i> -->
<span id="myIntro" class="w3-hide">
<a href="index.php">
<img src="admin/img/fcuautonomous.png" width="200px" height="50">
</a>
</span>
</div>
<header class="w3-container w3-theme w3-padding-18 w3-blue">
<h1 class="w3-xxxlarge w3-padding-16">
<a href="index.php">
<img src="admin/img/fcuautonomous.png" width="400px">
</a>
</h1>
</header>
<nav class="w3-card-4 w3-indigo">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="index.php"><b>Alumni Tracer System</b></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Alumni Registration</li>
<li>News and Events</li>
<li>Job Oppurtunities</li>
<li>Job Oppurtunities</li>
<li>Featured Alumni</li>
<li>Photo Gallery</li>
</ul>
</div>
</div>
</nav>
and for the Bootstrap carousel
<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>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="admin/img/SLIDER1.jpg" alt="Chania">
</div>
<div class="item">
<img src="admin/img/SLIDER2.jpg" alt="Chania">
</div>
<div class="item">
<img src="admin/img/SLIDER3.jpg" alt="Flower">
</div>
<div class="item">
<img src="admin/img/SLIDER4.jpg" alt="Flower">
</div>
<div class="item">
<img src="admin/img/SLIDER5.jpg" alt="Flower">
</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>
It is due to higher z-index of carousel indicators.
You can fix by either giving them lower z-index or by giving the navbar a higher z-index.
Increase the z-index property value of navbar to 21
The active image is displaying but nothing happens after that. I am new to Bootstrapper so I was hoping someone could let me know if I am missing libraries, or have to syntax wrong. I looked around and everything seems to be right?
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-th-list"></span></a>
California Autism Center & Learning Group
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Our Staff</li>
</ul>
</div>
</div>
</div>
</div>
<div class="hero-unit">
<div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" alt=""><img src="img/Banner.jpg"/></div>
<div class="item" alt=""><img src="img/autism1.jpg"/></div>
<div class="item" alt=""><img src="img/autism2.jpg"/></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<h3>How We Started</h3>
<p>Add information here.</p>
<h3>Our Goals</h3>
<p>Add nformation here.</p>
</div>
</div>
<hr>
<div class="container">
<div class="row-fluid">
<div class="span4">
<p>© 2013 </p>
</div>
<div class="span4 text-center">
<ul class="nav inline">
<li>About Us</li>
<li>Contact Us</li>
<li>Privacy Policy</li>
</ul>
</div>
<div class="span4 text-right">
<p></p>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script src=”js/bootstrap.js”></script>
</body>
</html>
my .js code:
$(document).ready(function() {
$('#myCarousel').carousel({
interval: 2000
})
});
Try this before the closing body tag. It works when I've used in on BS2 & 3.
<script>
$('.carousel').carousel({
pause:false,
interval:7000
})
</script>
I've created a Fiddle from your code and it works fine (beside the fact that images are 404 placeholders). My guess is that the problem is in those quotes your using here:
<script src=”js/bootstrap.js”></script>
My Chrome doesnt't treat those as normal quotes and in facts this line turns to:
<script src="”js/bootstrap.js”"></script>