How i can make my nav bar to come over my background-CodePudding

So in my project first navbar is coming and then the background which tend my web page a quite long and make a scroll button also there is a horizontal scroll too i dont know why . But i want that my navbar come forward from background and background should go backward. But it is not happening.

https://codepen.io/mohit-04/pen/wvJxPOK

INDEX

<!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"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <center>
      <!-- <navbar>
        
      </navbar> -->
      <nav >
        <span ><h1>&#xF17A; TEAM VIEWER</h1></span>
      </nav>

      <div  data-carousel>
        <button
          
          data-carousel-button="next"
          data-carousel-button
        >
          &#8669;
        </button>
        <button
          
          data-carousel-button="prev"
          data-carousel-button
        >
          &#8668;
        </button>

        <ul data-slides>
          <li  data-active>
            <div  style="width: 18rem">
              <img
                
                src="https://images.unsplash.com/photo-1644982647531-daff2c7383f3?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=600"
                alt="Card image cap"
              />
              <div >
                <h5 >Card title</h5>
                <p >
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" >Go somewhere</a>
              </div>
            </div>
          </li>
          <li >
            <div  style="width: 18rem">
              <img
                
                src="https://images.unsplash.com/photo-1653491888857-6cb8c8f0264c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
                alt="Card image cap"
              />
              <div >
                <h5 >Card title</h5>
                <p >
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" >Go somewhere</a>
              </div>
            </div>
          </li>
          <li >
            <div  style="width: 18rem">
              <img
                
                src="https://images.unsplash.com/photo-1625215081436-85323ed5042c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
                alt="Card image cap"
              />
              <div >
                <h5 >Card title</h5>
                <p >
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" >Go somewhere</a>
              </div>
            </div>
          </li>
          <li >
            <div  style="width: 18rem">
              <img
                
                src="https://images.unsplash.com/photo-1653597859079-bc6d0e9101de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
                alt="Card image cap"
              />
              <div >
                <h5 >Card title</h5>
                <p >
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" >Go somewhere</a>
              </div>
            </div>
          </li>
          <li >
            <div  style="width: 18rem">
              <img
                
                src="https://images.unsplash.com/photo-1653604212161-b50f445f7987?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0M3x8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
                alt="Card image cap"
                height="200"
                width="100"
              />
              <div >
                <h5 >Card title</h5>
                <p >
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </p>
                <a href="#" >Go somewhere</a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </center>
  </body>
</html>

STYLE

@import url("https://fonts.googleapis.com/css2?family=Lora:ital@1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Halant:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quattrocento&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito Sans:wght@200&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quattrocento&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-image: url("b.avif");

  background-repeat: no-repeat;
  background-size: cover;
}
nav {
  position: relative;
}

h1 {
  font-size: 50px;
  font-family: "Halant", serif;
}

h5 {
  font-size: 30px;
  font-weight: bolder;
  font-family: "Quattrocento", serif;
}

p {
  font-family: "Nunito Sans", sans-serif;
}

a {
  font-family: "Quattrocento", serif;
}

.carousel {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 200ms opacity ease-in-out;
}

.slide > img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.carousel > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.slide[data-active] {
  opacity: 1;
}

.carousel-button {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  font-size: 4rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0 0.5rem;
  background-color: rgba(0, 0, 0, 0.1);
}

.carousel-button:hover,
.carousel-button:focus {
  color: purple;
  background-color: rgba(0, 0, 0, 0.2);
}

.carousel-button:focus {
  outline: 1px solid black;
}

.carousel-button.prev {
  left: 24rem;
}

.carousel-button.next {
  right: 24rem;
}

.card {
  box-shadow: 1px 2px 3px 4px rgba(20, 20, 20, 0.3);
}

CodePudding user response：

use "sticky-top" with navbar and it will do the rest

<nav >

CodePudding user response：

To remove horizontal scroll bar set overflow-x to hidden of body.

To make navbar come forward set it's position to absolute instead of relative.

// taking ids
const button = document.querySelectorAll("[data-carousel-button]");

// looping though next and prev button means
// ** LOGIC **

// storing all the images in array and then if we click the
// left arrow then it will go to -1 and if right then  1
//through this it will navigate through each images using index of images
button.forEach((button) => {
  // function which check which button is gonna be clicked
  button.addEventListener("click", () => {
    const offset = button.dataset.carouselButton === "next" ? 1 : -1;
    // to navigate closest parent element making a loop in ul tag to navigate each li
    const slides = button
      .closest("[data-carousel]")
      .querySelector("[data-slides]");

    // just checking which slide means li has data active tag
    const activeSlide = slides.querySelector("[data-active]");
    // extracting all the li in array
    // getting the active slide and   offset means what we have to do means either  1 or -1
    let newIndex = [...slides.children].indexOf(activeSlide)   offset;

    // if it comes to last element and again user click left then it automatically goes to last element
    if (newIndex < 0) newIndex = slides.children.length - 1;
    if (newIndex >= slides.children.length) newIndex = 0;

    // adding .active to that slide and removeing data-active to the previous one
    slides.children[newIndex].dataset.active = true;
    delete activeSlide.dataset.active;
  });
});

@import url("https://fonts.googleapis.com/css2?family=Lora:ital@1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Halant:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quattrocento&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito Sans:wght@200&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quattrocento&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-image: url("https://images.unsplash.com/photo-1520052205864-92d242b3a76b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden /* to remove horizontal scrollbar */
}

nav {
  position: absolute !important; /* to make nav bar come forward*/
}

h1 {
  font-size: 50px;
  font-family: "Halant", serif;
}

h5 {
  font-size: 30px;
  font-weight: bolder;
  font-family: "Quattrocento", serif;
}

p {
  font-family: "Nunito Sans", sans-serif;
}

a {
  font-family: "Quattrocento", serif;
}

.carousel {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 200ms opacity ease-in-out;
}

.slide>img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.carousel>ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.slide[data-active] {
  opacity: 1;
}

.carousel-button {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  font-size: 4rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0 0.5rem;
  background-color: rgba(0, 0, 0, 0.1);
}

.carousel-button:hover,
.carousel-button:focus {
  color: purple;
  background-color: rgba(0, 0, 0, 0.2);
}

.carousel-button:focus {
  outline: 1px solid black;
}

.carousel-button.prev {
  left: 24rem;
}

.carousel-button.next {
  right: 24rem;
}

.card {
  box-shadow: 1px 2px 3px 4px rgba(20, 20, 20, 0.3);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<center>
  <!-- <navbar>
        
      </navbar> -->
  <nav >
    <span ><h1>&#xF17A; TEAM VIEWER</h1></span>
  </nav>

  <div  data-carousel>
    <button  data-carousel-button="next" data-carousel-button>
          &#8669;
        </button>
    <button  data-carousel-button="prev" data-carousel-button>
          &#8668;
        </button>

    <ul data-slides>
      <li  data-active>
        <div  style="width: 18rem">
          <img  src="https://images.unsplash.com/photo-1644982647531-daff2c7383f3?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=600" alt="Card image cap"
          />
          <div >
            <h5 >Card title</h5>
            <p >
              Some quick example text to build on the card title and make up the bulk of the card's content.
            </p>
            <a href="#" >Go somewhere</a>
          </div>
        </div>
      </li>
      <li >
        <div  style="width: 18rem">
          <img  src="https://images.unsplash.com/photo-1653491888857-6cb8c8f0264c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60" alt="Card image cap" />
          <div >
            <h5 >Card title</h5>
            <p >
              Some quick example text to build on the card title and make up the bulk of the card's content.
            </p>
            <a href="#" >Go somewhere</a>
          </div>
        </div>
      </li>
      <li >
        <div  style="width: 18rem">
          <img  src="https://images.unsplash.com/photo-1625215081436-85323ed5042c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60" alt="Card image cap" />
          <div >
            <h5 >Card title</h5>
            <p >
              Some quick example text to build on the card title and make up the bulk of the card's content.
            </p>
            <a href="#" >Go somewhere</a>
          </div>
        </div>
      </li>
      <li >
        <div  style="width: 18rem">
          <img  src="https://images.unsplash.com/photo-1653597859079-bc6d0e9101de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60" alt="Card image cap" />
          <div >
            <h5 >Card title</h5>
            <p >
              Some quick example text to build on the card title and make up the bulk of the card's content.
            </p>
            <a href="#" >Go somewhere</a>
          </div>
        </div>
      </li>
      <li >
        <div  style="width: 18rem">
          <img  src="https://images.unsplash.com/photo-1653604212161-b50f445f7987?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0M3x8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60" alt="Card image cap" height="200" width="100" />
          <div >
            <h5 >Card title</h5>
            <p >
              Some quick example text to build on the card title and make up the bulk of the card's content.
            </p>
            <a href="#" >Go somewhere</a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</center>