I have 3 breadcrumb arrows on top. When I click on an image of the three( PlasterBoard, Concrete, Aerated Concrete and Brick) in the body of my carousel that have one the first slide, one of the arrows is going to the very left. I want it to stay either in the middle or take place to the right.
Anchor Navigation
.breadcrumb>li+li:before {
padding: 0;
}
.breadcrumb li {
float: left;
}
.breadcrumb li.active a {
background: #5fdba7;
/*#5fdba7 -- front part of arrow of active RED*/
margin-left: 655px;
}
.breadcrumb li.completed a {
background: brown;
/* fallback color */
background: #ffc107;
}
.breadcrumb li.active a:after {
border-left: 30px solid #5fdba7;
padding-left: 65px;
}
.breadcrumb li.completed a:after {
border-left: 30px solid #ffc107;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 10px 10px 45px;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(0, 0%, 83%, 1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
color: white;
}
.breadcrumb li a:hover {
background: #ffc107;
}
.breadcrumb li a:hover:after {
border-left-color: #ffc107 !important;
}
.selector-for-some-widget {
box-sizing: content-box;
}
.carousel-inner img {
width: 100%;
height: 100%;
margin-top: -13px;
}
.buttonContainer {
margin-top: 130px;
margin-left: -180px;
}
* {
outline-style: none;
}
#heroText {
font-family: Impact;
letter-spacing: 0.5px;
text-decoration: underline;
}<html lang="en">
<head>
<title>Anchor Navigation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="CarouselCSS.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- INITIALIZE OF SLIDES -->
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-caption d-none d-md-block">
<h1 id="heroText" style="color: #3775B7">DIY - GADR Brands</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- SLIDE 0-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="active"><a href="#">MATERIAL</a></li>
<li class="completed"><a href="#">WEIGHT</a></li>
<li class="completed"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img id="first" src="imgs/DIYWORKER.jpg" alt="DIYworker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- PLASTER BOARD CLICK BUTTON AND GET NEXT SLIDE-->
<a class="carousel-control-next" href="#demo" data-slide-to="1"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/plasterBoardPic.png"></a>
<!-- BRICK CLICK BUTTON AND GET NEXT SLIDE-->
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="7"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/brickIMG.png"></a>
</div>
<!-- CONCRETE BUTTON AND GET NEXT SLIDE-->
<div class="column" style=" width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="11"><input class="buttonContainer" style="margin-right: 600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/concreteSTONEimg.png"></a>
</div>
<!-- AERATE CONCRETE CLICK BUTTON AND GET NEXT SLIDE-->
<div class="column" style="width:100%; height:100%;">
<a id="pulseAE" class="carousel-control-next" href="#demo" data-slide-to="13"><input class="buttonContainer" style="margin-right: 100px; margin-bottom: 900px;width: 225px; height: 225px;" type="image" src="imgs/Material_Images/aeratedConcreteIMG.png"></a>
</div>
</div>
<!-- END OF MATERIAL ROW -->
</div>
</div>
<!-- KILOS OF PLASTER BOARD SECOND SLIDE -->
<div class="carousel-item ">
<!-- SLIDE 1-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="completed"><a href="#">MATERIAL</a></li>
<li class="active"><a href="#">WEIGHT</a></li>
<li class="completed"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img src="imgs/DIYYoungWorker.jpg" alt="youngWorker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- CLICK BUTTON AND GET NEXT SLIDE-->
<a class="carousel-control-next" href="#demo" data-slide-to="2"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/10kilos.png"></a>
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="3"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/25kg.png"></a>
</div>
<div class="column" style=" width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="4"><input class="buttonContainer" style="margin-right: 600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/100kg.png"></a>
</div>
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="5"><input class="buttonContainer" style="margin-right: 50px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/150kg.png"></a>
</div>
</div>
</div>
</div>
<!-- END KILOS OF PLASTER BOARD SECOND SLIDE -->
<!-- SECOND SLIDE ANCHOR PLASTER BOARD -->
<div class="carousel-item ">
<!-- SLIDE 2-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="completed"><a href="#">MATERIAL</a></li>
<li class="completed"><a href="#">WEIGHT</a></li>
<li class="active"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img src="imgs/hammerGUY.jpg" alt="youngWorker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- ADD near href -data-slide-to="slideNumber"- if you want to play animation-->
<a class="carousel-control-next" href="#demo"><input class="buttonContainer" style="margin-right: 800px;margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/AnchorsPerKilo/PlasterboardKilos/PictureHook10.png"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>I want the arrows to go right and in order.
e.g Start > Process > End (This to go on the very right one by one depending the state of the user.
See if, this is what I understood from the problem. You can compare the CSS with your to adopt the changes.
.breadcrumb>li+li:before {
padding: 0;
}
.breadcrumb {
margin: auto;
width: 440px;
}
.breadcrumb li {
float: left;
}
.carousel-inner{
background-color: #e9ecef;
}
.breadcrumb li.active a {
background: #5fdba7;
/*#5fdba7 -- front part of arrow of active RED*/
/*margin-left: 655px;*/
}
.breadcrumb li.completed a {
background: brown;
/* fallback color */
background: #ffc107;
}
.breadcrumb li.active a:after {
border-right: 34px solid #5fdba7;
/*padding-left: 65px;*/
}
.breadcrumb li.completed a:after {
border-right: 34px solid #ffc107;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 35px 10px 30px;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid transparent;
position: absolute;
top: 50%;
margin-top: -50px;
left: -19px;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: -20px;
z-index: 1;
}
.breadcrumb li:first-child a {
color: white;
}
.breadcrumb li a:hover {
background: #ffc107;
}
.breadcrumb li a:hover:after {
border-left-color: #ffc107 !important;
}
.selector-for-some-widget {
box-sizing: content-box;
}
.carousel-inner img {
width: 100%;
height: 100%;
margin-top: -13px;
}
.buttonContainer {
margin-top: 130px;
margin-left: -180px;
}
* {
outline-style: none;
}
#heroText {
font-family: Impact;
letter-spacing: 0.5px;
text-decoration: underline;
}<html lang="en">
<head>
<title>Anchor Navigation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="CarouselCSS.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- INITIALIZE OF SLIDES -->
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-caption d-none d-md-block">
<h1 id="heroText" style="color: #3775B7">DIY - GADR Brands</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- SLIDE 0-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="active"><a href="#">MATERIAL</a></li>
<li class="completed"><a href="#">WEIGHT</a></li>
<li class="completed"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img id="first" src="imgs/DIYWORKER.jpg" alt="DIYworker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- PLASTER BOARD CLICK BUTTON AND GET NEXT SLIDE-->
<a class="carousel-control-next" href="#demo" data-slide-to="1"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/plasterBoardPic.png"></a>
<!-- BRICK CLICK BUTTON AND GET NEXT SLIDE-->
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="7"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/brickIMG.png"></a>
</div>
<!-- CONCRETE BUTTON AND GET NEXT SLIDE-->
<div class="column" style=" width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="11"><input class="buttonContainer" style="margin-right: 600px; margin-bottom: 900px; width: 225px; height: 225px;" type="image" src="imgs/Material_Images/concreteSTONEimg.png"></a>
</div>
<!-- AERATE CONCRETE CLICK BUTTON AND GET NEXT SLIDE-->
<div class="column" style="width:100%; height:100%;">
<a id="pulseAE" class="carousel-control-next" href="#demo" data-slide-to="13"><input class="buttonContainer" style="margin-right: 100px; margin-bottom: 900px;width: 225px; height: 225px;" type="image" src="imgs/Material_Images/aeratedConcreteIMG.png"></a>
</div>
</div>
<!-- END OF MATERIAL ROW -->
</div>
</div>
<!-- KILOS OF PLASTER BOARD SECOND SLIDE -->
<div class="carousel-item ">
<!-- SLIDE 1-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="completed"><a href="#">MATERIAL</a></li>
<li class="active"><a href="#">WEIGHT</a></li>
<li class="completed"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img src="imgs/DIYYoungWorker.jpg" alt="youngWorker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- CLICK BUTTON AND GET NEXT SLIDE-->
<a class="carousel-control-next" href="#demo" data-slide-to="2"><input class="buttonContainer" style="margin-right: 1600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/10kilos.png"></a>
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="3"><input class="buttonContainer" style="margin-right: 1100px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/25kg.png"></a>
</div>
<div class="column" style=" width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="4"><input class="buttonContainer" style="margin-right: 600px; margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/KiloImages/100kg.png"></a>
</div>
<div class="column" style="width:100%; height:100%;">
<a class="carousel-control-next" href="#demo" data-slide-to="5"><input class="buttonContainer" style="margin-right: 50px; margin-bottom:900px;width: 225px; height: 225px;" type="image" src="imgs/KiloImages/150kg.png"></a>
</div>
</div>
</div>
</div>
<!-- END KILOS OF PLASTER BOARD SECOND SLIDE -->
<!-- SECOND SLIDE ANCHOR PLASTER BOARD -->
<div class="carousel-item ">
<!-- SLIDE 2-->
<!-- BREADCUMB nav bar -->
<ul class="breadcrumb">
<li class="completed"><a href="#">MATERIAL</a></li>
<li class="completed"><a href="#">WEIGHT</a></li>
<li class="active"><a href="#">PRODUCT</a></li>
</ul>
<!-- END BREADCUMB nav bar -->
<img src="imgs/hammerGUY.jpg" alt="youngWorker" width="100%" height="100%">
<div class="carousel-caption d-none d-md-block">
<div class="row" style="background-color:green; width:100% height:100%;">
<!-- ADD near href -data-slide-to="slideNumber"- if you want to play animation-->
<a class="carousel-control-next" href="#demo"><input class="buttonContainer" style="margin-right: 800px;margin-bottom:900px; width: 225px; height: 225px;" type="image" src="imgs/AnchorsPerKilo/PlasterboardKilos/PictureHook10.png"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>