I’m new to HTML and CSS, so maybe my explanation of the problem may no be accurate but I will try my best to make it understandable.
So the problem is I have a title bar and then a navbar below it. In the navbar, I have links to the pages which I name by the year 2021, 2020, 2019, 2018…
When I scroll the page down the navbar sticks at top of the page, but the problem is there are some contents that just don’t scroll below the navbar. So the content overlaps the navbar hindering the view of the navbar.
I’m providing the image and code below.
Page:
The carousel content overlapping with the navbar:
<style>
/* Make the image fully responsive */
.nav-link{
font-size: 35px;
font-weight: 500;
text-align: center;
}
.nav-item{
width: 150px;
}
.navbar-nav>.active>a {
background-color: #eeb03d;
color: black;
}
.content {
padding: 16px;
}
.sticky {
position: sticky;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
.card{
padding: 7px;
}
.carousel-inner nav{
width: 100%;
height: 66px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
height: 50px;
width: 10%;
/* outline: black;
background-size: 100%, 100%;
border-radius: 50%;
border: 1px solid black; */
background-color:darkgray;
}
/* .carousel-next-icon:after
{
content: '>';
font-size: 55px;
color:whitesmoke;
background-color: blue;
}
.carousel-prev-icon:after {
content: '<';
font-size: 55px;
color:whitesmoke;
background-color: blue;
} */
.carousel-control-prev {
margin-left: -10px;
bottom: 0%;
}
.carousel-control-next {
margin-right: -10px;
bottom: 0%;
}
</style>
<section class="page">
<div class="titlebar">
<div class="pagetitle wow fadeInLeft"><h1>Print Media (English)</h1></div>
<!--<div class="pagetitle wow fadeInLeft"><h1>Glove Enquiry Form</h1></div>-->
<div id="breadcum" class="wow fadeInRight"><a href="http://www.topglove.com/">Print Media (English)</a> | <a href="#">Print Media (Cantonise)</a> | <a href="#">Print Media (Tamil)</a> | <a href="#">Electronic Media</a></div>
</div>
<div id="demo" class="carousel slide" data-interval="false" >
<!-- The slideshow -->
<div class="carousel-inner ">
<div class="carousel-item active">
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item active" >
<a class="nav-link" href="#">2021</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2020</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2019</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2018</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2017</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2016</a>
</li>
</ul>
</nav>
</div>
<div class="carousel-item">
<nav class="navbar navbar-expand-sm bg-light ">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">2015</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2014</a>
</li>
</ul>
</nav>
</div>
</div>
<a class="carousel-control-next" href="#demo" data-slide="prev" style="position: absolute; right: 10%;">
<!-- <span class="carousel-prev-icon"></span> -->
<span class="carousel-control-prev-icon" aria-hidden="true" style="background-color: blue;"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next" style="position: absolute; right: 0%; ">
<!-- <span class="carousel-next-icon"></span> -->
<span class="carousel-control-next-icon" aria-hidden="true" style="background-color: blue;"></span>
</a>
</div>
<div class="search-container" style="background: white; padding-left: 10px; width: 30%;">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search" style="width: 85%;">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<h3 class="title" style="width: fit-content; margin-top: 2%; margin-left: 30px;"> November News </h3>
<div id="NovCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" >
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://bikerumor.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-29.jpg" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://cf.shopee.com.my/file/31d90d546f22286c5d3b29b68d8f3e47" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://bikerumor-wpengine.netdna-ssl.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-37.jpg" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#NovCarousel" 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="#NovCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<h3 class="title" style="width: fit-content; margin-top: 2%; margin-left: 30px;"> October News </h3>
<div id="OctCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" >
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://bikerumor.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-29.jpg" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://cf.shopee.com.my/file/31d90d546f22286c5d3b29b68d8f3e47" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://bikerumor-wpengine.netdna-ssl.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-37.jpg" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('ul.navbar-nav > li')
.click(function (e) {
$('ul.navbar-nav > li')
.removeClass('active');
$(this).addClass('active');
});
});
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("demo");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
Hopes anyone can help me with this, thank you.
Advertisement
Answer
A z-index on id=”demo” will solve your problem. Check my code below-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
/* Make the image fully responsive */
.nav-link{
font-size: 35px;
font-weight: 500;
text-align: center;
}
.nav-item{
width: 150px;
}
.navbar-nav>.active>a {
background-color: #eeb03d;
color: black;
}
.content {
padding: 16px;
}
.sticky {
position: sticky;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
.card{
padding: 7px;
}
.carousel-inner nav{
width: 100%;
height: 66px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
height: 50px;
width: 10%;
/* outline: black;
background-size: 100%, 100%;
border-radius: 50%;
border: 1px solid black; */
background-color:darkgray;
}
/* .carousel-next-icon:after
{
content: '>';
font-size: 55px;
color:whitesmoke;
background-color: blue;
}
.carousel-prev-icon:after {
content: '<';
font-size: 55px;
color:whitesmoke;
background-color: blue;
} */
.carousel-control-prev {
margin-left: -10px;
bottom: 0%;
}
.carousel-control-next {
margin-right: -10px;
bottom: 0%;
}
#demo{
z-index: 9999;
}
</style>
</head>
<body>
<section class="page">
<div class="titlebar">
<div class="pagetitle wow fadeInLeft"><h1>Print Media (English)</h1></div>
<!--<div class="pagetitle wow fadeInLeft"><h1>Glove Enquiry Form</h1></div>-->
<div id="breadcum" class="wow fadeInRight"><a href="http://www.topglove.com/">Print Media (English)</a> | <a href="#">Print Media (Cantonise)</a> | <a href="#">Print Media (Tamil)</a> | <a href="#">Electronic Media</a></div>
</div>
<div id="demo" class="carousel slide" data-interval="false" >
<!-- The slideshow -->
<div class="carousel-inner ">
<div class="carousel-item active">
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item active" >
<a class="nav-link" href="#">2021</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2020</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2019</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2018</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2017</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2016</a>
</li>
</ul>
</nav>
</div>
<div class="carousel-item">
<nav class="navbar navbar-expand-sm bg-light ">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">2015</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2014</a>
</li>
</ul>
</nav>
</div>
</div>
<a class="carousel-control-next" href="#demo" data-slide="prev" style="position: absolute; right: 10%;">
<!-- <span class="carousel-prev-icon"></span> -->
<span class="carousel-control-prev-icon" aria-hidden="true" style="background-color: blue;"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next" style="position: absolute; right: 0%; ">
<!-- <span class="carousel-next-icon"></span> -->
<span class="carousel-control-next-icon" aria-hidden="true" style="background-color: blue;"></span>
</a>
</div>
<div class="search-container" style="background: white; padding-left: 10px; width: 30%;">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search" style="width: 85%;">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<h3 class="title" style="width: fit-content; margin-top: 2%; margin-left: 30px;"> November News </h3>
<div id="NovCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" >
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://bikerumor.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-29.jpg" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://cf.shopee.com.my/file/31d90d546f22286c5d3b29b68d8f3e47" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://bikerumor-wpengine.netdna-ssl.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-37.jpg" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#NovCarousel" 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="#NovCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<h3 class="title" style="width: fit-content; margin-top: 2%; margin-left: 30px;"> October News </h3>
<div id="OctCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" >
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://images.immediate.co.uk/production/volatile/sites/21/2020/04/Orbea-Orca-OMX-M10i-LTD-D-01-c2395f5.jpg?quality=90&resize=768,574" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://bikerumor.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-29.jpg" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://cf.shopee.com.my/file/31d90d546f22286c5d3b29b68d8f3e47" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="https://bikerumor-wpengine.netdna-ssl.com/wp-content/uploads/2019/09/OrbeaOrcaOMX2020_Bikechecks-37.jpg" alt="Card image cap">
<div class="card-img-overlay">
<h5 class="card-title" style="width: fit-content; padding: 3px; position: absolute; right: 4%; top: 3%;">Card title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<!-- <div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> -->
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('ul.navbar-nav > li')
.click(function (e) {
$('ul.navbar-nav > li')
.removeClass('active');
$(this).addClass('active');
});
});
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("demo");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>