[with toggle effect the carousal is also moving which I don't want][1]
[without toggle the carousal is at right place ][2]
[1]: https://i.stack.imgur.com/84qYC.jpg
[2]: https://i.stack.imgur.com/rJJ8P.jpg
Here is the code html code
/*html code*?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="home.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"
crossorigin="anonymous"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="header-row justify-content-between align-items">
<div class="logo">
<img src="logo.png">
</div>
<button type="button" class="nav-toggler">
<span></span>
</button>
<nav class="navigation">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="display-flex">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="news-slider" class="owl-carousel owl-theme">
<div class="news-grid">
<div class="news-grid-image">
<img src="bg.jpg" alt="">
<div class="news-grid-box">
<h1>19</h1>
<p>Sep</p>
</div>
</div>
<div class="news-grid-txt">
<span>Finance</span>
<h2>heading will be here</h2>
<ul>
<li><i class="fa fa-calendar"></i>Sept 19, 2020</li>
<li><i class="fa fa-user"></i>Admin</li>
</ul>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro eligendi
et
excepturi minima tempora ex magni at fugit, voluptatibus animi minus. Non numquam
vel
impedit perferendis dolorum voluptatem quos.</p>
<button><a href="#">Read More....</a></button>
</div>
</div>
<div class="news-grid">
<div class="news-grid-image">
<img src="bg.jpg" alt="">
<div class="news-grid-box">
<h1>19</h1>
<p>Sep</p>
</div>
</div>
<div class="news-grid-txt">
<span>Finance</span>
<h2>heading will be here</h2>
<ul>
<li><i class="fa fa-calendar"></i>Sept 19, 2020</li>
<li><i class="fa fa-user"></i>Admin</li>
</ul>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro eligendi
et
excepturi minima tempora ex magni at fugit, voluptatibus animi minus. Non numquam
vel
impedit perferendis dolorum voluptatem quos.</p>
<button><a href="#">Read More....</a></button>
</div>
</div>
<div class="news-grid">
<div class="news-grid-image">
<img src="bg.jpg" alt="">
<div class="news-grid-box">
<h1>19</h1>
<p>Sep</p>
</div>
</div>
<div class="news-grid-txt">
<span>Finance</span>
<h2>heading will be here</h2>
<ul>
<li><i class="fa fa-calendar"></i>Sept 19, 2020</li>
<li><i class="fa fa-user"></i>Admin</li>
</ul>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro eligendi
et
excepturi minima tempora ex magni at fugit, voluptatibus animi minus. Non numquam
vel
impedit perferendis dolorum voluptatem quos.</p>
<button><a href="#">Read More....</a></button>
</div>
</div>
<div class="news-grid">
<div class="news-grid-image">
<img src="bg.jpg" alt="">
<div class="news-grid-box">
<h1>19</h1>
<p>Sep</p>
</div>
</div>
<div class="news-grid-txt">
<span>Finance</span>
<h2>heading will be here</h2>
<ul>
<li><i class="fa fa-calendar"></i>Sept 19, 2020</li>
<li><i class="fa fa-user"></i>Admin</li>
</ul>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro eligendi
et
excepturi minima tempora ex magni at fugit, voluptatibus animi minus. Non numquam
vel
impedit perferendis dolorum voluptatem quos.</p>
<button><a href="#">Read More....</a></button>
</div>
</div>
<div class="news-grid">
<div class="news-grid-image">
<img src="bg.jpg" alt="">
<div class="news-grid-box">
<h1>19</h1>
<p>Sep</p>
</div>
</div>
<div class="news-grid-txt">
<span>Finance</span>
<h2>heading will be here</h2>
<ul>
<li><i class="fa fa-calendar"></i>Sept 19, 2020</li>
<li><i class="fa fa-user"></i>Admin</li>
</ul>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium porro eligendi
et
excepturi minima tempora ex magni at fugit, voluptatibus animi minus. Non numquam
vel
impedit perferendis dolorum voluptatem quos.</p>
<button><a href="#">Read More....</a></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-content">
<h3>Code Opacity</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae at excepturi placeat omnis totam assumenda quae, </p>
<ul class="socials">
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-youtube"></i></a></li>
<li><a href=""><i class="fa fa-google-plus"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-linkedin-square"></i></a></li>
</ul>
</div>
<div class="footer-bottom">
<p> copyright ©2022 codeOpacity. designed by <span>Rahul Singh</span> </p>
</div>
</footer>
<script type="text/javascript">
$(document).ready(function () {
$("#news-slider").owlCarousel({
items: 3, //10 items above 1000px browser width
itemsDesktop: [1000, 3], //5 items between 1000px and 901px
itemsDesktopSmall: [900, 2], // betweem 900px and 601px
itemsTablet: [600, 1], //2 items between 600 and 0;
itemsMobile: false,
autoPlay: true
});
});
</script>
<script src="home.js"></script>
</body>
</html>
/*The css for that code */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:'Quicksand',sans-serif;
}
body{
height: 100vh;
width: 100%;
background: url('bg.jpg') center no-repeat;
background-size: cover;
}
.navigation ul {
list-style: none;
}
.navigation ul li{
padding: 10px 10px;
display: inline-block;
}
.navigation ul li a{
text-decoration: none;
padding: 10px 10px;
font-size: 1.5rem;
background-color: transparent;
color: #fff;
background-color: transparent;
transition: 0.3s;
}
.navigation ul li a:hover{
background-color: #fff;
color: #000;
}
.mavigation ul li.active a{
background-color: #fff;
color: #000;
}
.header {
padding: 15px 0px;
line-height: 1.5;
}
.header-row{
display: flex;
flex-wrap: wrap;
}
.justify-content-between{
justify-content: space-between;
}
.align-items{
align-items: center;
}
.navigation{
padding: 0 30px;
}
.logo img{
width: 150px;
height: auto;
}
.nav-toggler{
height: 34px;
width: 44px;
background-color: #fff;
border-radius: 4px;
cursor: pointer;
display: none;
}
.nav-toggler :focus{
outline: none;
box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5);
}
.nav-toggler span{
height: 2px;
width: 20px;
margin: auto;
background-color: #000;
display: block;
position: relative;
transition: all 0.3s ease;
}
.nav-toggler.active span{
background-color: transparent;
}
.nav-toggler span::before, .nav-toggler span::after{
content :'';
position : absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
transition: all 0.3s ease;
}
.nav-toggler span::after{
transform: translateY(6px);
}
.nav-toggler.active span::after{
transform: rotate(45deg);
}
.nav-toggler span::before{
transform: translateY(-6px);
}
.nav-toggler.active span::before{
transform: rotate(135deg);
}
/******* Slider *******/
.display-flex{
display: flex;
align-items: center;
}
.news-grid{
position: relative;
width: auto;
background: #fff;
border-radius: 5px;
border: 1px solid #ddd;
margin: 20px;
overflow: hidden;
}
.news-grid-image{
width: 100%;
height: 280px;
overflow: hidden;
}
.news-grid-image img{
height: 100%;
width: 100%;
object-fit: cover;
transition: .5s;
}
.news-grid-box{
display: block;
position: absolute;
text-align: center;
background: #26ccca;
left: -80px;
top: 15px;
padding: 10px;
transition: .5s;
}
.news-grid-box h1{
color:#fff;
font-size: 30px;
font-weight: 400;
letter-spacing: 2px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(255,255,255,0.3);
margin-bottom: 5px;
}
.news-grid-box p{
color: #fff;
margin-bottom: 0;
font-size:14px;
font-weight: 400;
}
.news-grid-txt span{
color:#26ccca;
font-size: 13px;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
}
.news-grid-txt h2{
color: #111;
font-size: 20px;
font-weight: 500;
letter-spacing: 1px;
margin: 10px 0px 5px 0px;
}
.news-grid-txt ul li{
list-style-type: none;
display: inline-block;
font-size: 14px;
font-weight:300;
margin: 8px 10px 8px 0px;
letter-spacing: 1px;
}
.news-grid-txt ul li i{
color: #26ccca;
font-size: 14px;
font-weight: 500;
margin-right: 5px;
}
.news-grid-txt p{
color: #222;
font-size: 14px;
font-weight: 300;
line-height: 170%;
letter-spacing: 1.5px;
border-bottom: 1px solid #ececec;
padding-bottom: 15px;
margin-bottom: 25px;
height: 75px;
overflow: hidden;
}
.news-grid-txt button {
background: #26ccca;
padding: 8px 20px;
border: 0px;
border-radius: 50px;
margin: 10px;
}
.news-grid-txt button a{
color: #fff;
font-size: 14px;
font-weight: 300;
line-height: 30px;
letter-spacing: 1px;
text-decoration-line: none;
transition: .5s;
}
.news-grid:hover .news-grid-box{
left: 15px;
transition: 0.5s;
}
.news-grid:hover .news-grid-image img{
filter: grayscale(1);
transform: scale(1.1);
transition: .5s;
}
.news-grid:hover .news-grid-txt button a{
letter-spacing: 2px ;
transition: 0.5s;
}
/*******Footer *******/
footer{
color: #fff;
padding-top: 20px;
height: auto;
width: 100vw;
}
footer .footer-content{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
footer .footer-content h3{
font-size: 1.8rem;
line-height: 3rem;
text-transform: capitalize;
font-weight: 400;
}
footer .footer-content .socials{
list-style: none;
display: flex;
justify-content: center;
align-items: center;
margin: 1rem 0 1rem 0;
}
footer .footer-content .socials li{
margin: 0 10px;
}
footer .footer-content .socials li a{
text-decoration: none;
color: #fff;
}
footer .footer-content .socials li a i{
font-size: 1.1rem;
transition: color 0.4s ease;
}
footer .footer-content .socials li a:hover i{
color: aqua;
}
footer .footer-bottom{
background-color: #000;
padding: 20px 0;
text-align: center;
width: 100vw;
}
footer .footer-bottom p{
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
footer .footer-bottom span{
opacity: .4;
text-transform: uppercase;
}
@media screen and (max-width: 991px) {
.nav-toggler{
display: block;
}
.navigation{
width: 100%;
background-color: transparent;
padding: 0;
margin-top: 12px;
max-height: 0px;
overflow: hidden;
visibility: hidden;
transition: all 0.5s ease;
}
.navigation.open{
visibility: visible;
}
.navigation ul{
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.8);
}
.navigation ul li{
padding: 0;
display: block;
}
.navigation ul li a{
display: block;
text-align: center;
}
.navigation ul li a:hover{
color: #000;
background-color: transparent;
}
}
/*Javascript file home.js */
const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", navToggle);
function navToggle(){
navToggler.classList.toggle("active");
const navigation = document.querySelector(".navigation");
navigation.classList.toggle("open"); // here is the open toggler
if(navigation.classList.contains("open")){
navigation.style.maxHeight = navigation.scrollHeight + "px";
}
else{
navigation.removeAttribute("style");
}
}
the code contains Javascript , Html file and Css file. In open class is added when the toggler gets on by using javascript and the open class is removed when toggler switches off.
in the @media screen when the width is changed to different size than desktop then I am hiding the navigation and displaying the nav-toggler and on clicking I am calling the javascript in which the .navigation.open visibility is made visible.
The functionality is working correctly. the problem is when I display the navigation with the help of javascript toggle functionality . the display of carousal is going down. I want that carousal to be stagnant in the position it is. the toggle should overlap and come at the top .
