0
    [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 &copy;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 .

Rahul Singh
  • 1
  • Take a look at this: [Fixed position but relative to container](https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container) – AStombaugh May 20 '22 at 15:42
  • Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – Community May 20 '22 at 15:43
  • I have added the image at the top of the code section . please have a look what is happening. on clicking toggler the navigation is coming and the carousal is also moving which I don't want to happen. I want the carousal to be stagnant and get scrolled when I move the browser scroller. Not when the toggler gets active. https://i.stack.imgur.com/84qYC.jpg https://i.stack.imgur.com/rJJ8P.jpg – Rahul Singh May 20 '22 at 15:51
  • can you please give me a solution for this and explain me . I don't want to fix the carousal. Carousal should be movable when I move scroll bar. It should not move when the toggle becomes active – Rahul Singh May 20 '22 at 15:57
  • @RahulSingh Just so I understand before I attempt this: do you want the menu to go *over* the carousel when opened and active and have the carousel not change position? Is that correct? – AStombaugh May 20 '22 at 18:38
  • Absolute positioning can be problematic on mobile interfaces which often cut the display area by 1/3 to make room for a soft keyboard that dynamically appears and disappears based on user focus in textbox or input areas. – Ronnie Royston May 20 '22 at 19:12
  • @RonnieRoyston What would you suggest that would improve my answer? – AStombaugh May 20 '22 at 19:26

1 Answers1

0

Provided I completely understand what you're asking for, here's what I did: I made your mobile menu positioned absolutely and adjusted and open and closed classes as necessary. I also used the z-index to make sure it appears above everything else. You can tune the attributes to your liking. Doing it this way prevents anything in the rest of your doc flow from changing and it's still all scrollable and I didn't have to modify your owl carousel to do it.

Your code didn't include links to any images so I just put some placeholders in the background and put a gray background over your nav so I could see what I was working on, you can remove those and replace them with your actual content.

Hope that covers it, let me know if you need any further assistance

$(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
  });
});

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");
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
}

body {
  height: 100vh;
  width: 100%;
  background: url('https://i.imgur.com/BHvRNUB.jpeg') center 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;
  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%;
    position: absolute;
    top: 3rem;
    left: 0;
    background-color: transparent;
    padding: 0;
    max-height: 0px;
    overflow: hidden;
    visibility: hidden;
    transition: all 0.5s ease;
  }
  .navigation.open {
    visibility: visible;
    width: 100%;
    z-index: 99;
    position: absolute;
    background-color: rgba(127, 127, 127, 0.9);
    top: 3rem;
    left: 0;
  }
  .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;
  }
}
<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 &copy;2022 codeOpacity. designed by <span>Rahul Singh</span> </p>
    </div>
  </footer>
AStombaugh
  • 1,601
  • 8
  • 19