Home > Enterprise >  Issue with a fixed header and slideshow
Issue with a fixed header and slideshow

Time:01-19

So the issue is, the header should be fixed to ease navigation throughout the page. However with the carousel of testimonials they are overlapping if you scroll down. Any solution or elegant alternative is highly appreciated.

Fiddle:https://jsfiddle.net/6oLuyqdp/3/

PS: Yes I know the NAV looks horrible for a smaller screen that's the next step. The overlaying is currently the issue.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>CopyCrest</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="We are a team of experienced copywriters that offer professional and high-quality copywriting services for businesses of all sizes. Our services include website copy, blog posts, product descriptions, and more."
    />
    <link rel="shortcut icon" type="image/x-icon" href="logo_small.png" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css"
    />
    <link rel="stylesheet" href="example.css" />
  </head>
  <body>
    <header>
      <div >
        <a href="#">
          <img src="logo2_transparent.png" alt="logo" />
        </a>
      </div>
      <nav>
        <ul>
          <li><a href="#about-us">Home</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#pricing">Pricing</a></li>
          <li><a href="#testimonials">Testimonials</a></li>
          <li><a href="#order-now">Order</a></li>
        </ul>
      </nav>
    </header>
   
    <main>
      <section id="testimonials">
        <h1>Testimonials</h1>
        <!-- START TESTIMONIAL -->
        <section id="testimonial_area" >
          <div >
            <div >
              <div >
                <div >
                  <div >
                    <div >
                      <img src="img/2.jpg" alt="" />
                    </div>
                    <h5>Person's name</h5>
                    <span>Designation Goes Here</span>
                    <p >
                      "The team at My Copywriting Website helped us improve our
                      website's copy and increase our conversion rate. Highly
                      recommend!" - John Doe, CEO at Example Inc.<br><br><br>
                    </p>
                    <h6 >
                      <i ></i>
                      <i ></i>
                      <i ></i>
                      <i ></i>
                    </h6>
                  </div>
                  <!-- END SINGLE TESTIMONIALS -->

                  <div >
                    <div >
                      <img src="img/3.jpg" alt="" />
                    </div>
                    <h5>Person's name</h5>
                    <span>Designation Goes Here</span>
                    <p >
                      "Our firm gained more leads because to the blog posts and
                      social media content My Copywriting Website produced for
                      us. I'm grateful." — Jane Smith, Example Inc.'s marketing
                      manager<br><br>
                    </p>
                    <h6 >
                      <i ></i>
                      <i ></i>
                      <i ></i>
                      <i ></i>
                    </h6>
                  </div>
                  <!-- END SINGLE TESTIMONIALS -->

                  <div >
                    <div >
                      <img src="img/4.jpg" alt="" />
                    </div>
                    <h5>Person's name</h5>
                    <span>Designation Goes Here</span>
                    <p >
                      "The quality of the product descriptions that My
                      Copywriting Website wrote for us was excellent. They
                      really helped us boost our sales." - Michael Brown,
                      E-commerce Manager at Example Inc.<br><br>
                    </p>
                    <h6 >
                      <i ></i>
                      <i ></i>
                      <i ></i>
                      <i ></i>
                    </h6>
                  </div>
                  <!-- END SINGLE TESTIMONIALS -->

                  <div >
                    <div >
                      <img src="img/5.jpg" alt="" />
                    </div>
                    <h5>Person's name</h5>
                    <span>Designation Goes Here</span>
                    <p >
                      "I was impressed by the quality of the copywriting
                      services provided by My Copywriting Website. They helped
                      us improve our website's engagement and conversions." -
                      Sarah Lee, Head of Digital Marketing at Example Inc.<br>
                    </p>
                    <h6 >
                      <i ></i>
                      <i ></i>
                      <i ></i>
                      <i ></i>
                    </h6>
                  </div>
                  <!-- END SINGLE TESTIMONIALS -->

                  <div >
                    <div >
                      <img src="img/6.jpg" alt="" />
                    </div>
                    <h5>Person's name</h5>
                    <span>Designation Goes Here</span>
                    <p >
                      "My Copywriting Website's blog post writing services were
                      excellent. They helped us attract more visitors to our
                      website and generate more leads." - David Kim, Content
                      Marketing Manager at Example Inc.<br><br>
                    </p>
                    <h6 >
                      <i ></i>
                      <i ></i>
                      <i ></i>
                      <i ></i>
                    </h6>
                  </div>
                  <!-- END SINGLE TESTIMONIALS -->
                </div>
              </div>
            </div>
          </div>
        </section>
        <!-- END TESTIMONIAL -->
      </section>
      <p>
        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.        We create a pitch deck that is polished, interesting, and
        successfully communicates the value of your company to make a
        lasting impression. Our team of professionals will collaborate
        with you to comprehend your company and target market, then use
        this understanding to develop a pitch deck that connects with them
        and motivates them to act. In order to make the deck as successful
        as possible, we'll also employ analytics and statistics.
      </p>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
      <script>
        $(".testmonial_slider_area").owlCarousel({
          autoplay: true,
          slideSpeed: 1000,
          items: 3,
          loop: true,
          nav: true,
          navText: [
            '<i ></i>',
            '<i ></i>',
          ],
          margin: 30,
          dots: true,
          responsive: {
            320: {
              items: 1,
            },
            767: {
              items: 2,
            },
            600: {
              items: 2,
            },
            1000: {
              items: 3,
            },
          },
        });
      </script>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
    <script>
      $(".testmonial_slider_area").owlCarousel({
        autoplay: true,
        slideSpeed: 1000,
        items: 3,
        loop: true,
        nav: true,
        navText: [
          '<i ></i>',
          '<i ></i>',
        ],
        margin: 30,
        dots: true,
        responsive: {
          320: {
            items: 1,
          },
          767: {
            items: 2,
          },
          600: {
            items: 2,
          },
          1000: {
            items: 3,
          },
        },
      });
    </script>

  </body>
</html>

CSS:

header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* The first and third column will take up all the remaining space */
  align-items: center; /* center the items vertically */
  height: 22vh; /* you can use vh to set the height in relation to the viewport height */
  background-color: #5bc0f8;
  color: #fff;
  box-shadow: 0px 2px 5px rgb(48, 47, 47);
  position: fixed;
  width: 100%;
  left: 0px;
  top: 0px;
}

.logo-container {
  grid-row: 1;
  grid-column: 1;
  width: 13vw;
  height: 20vh;
}

.logo-container a {
  display: flex;
}

.logo-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

nav {
  grid-row: 1;
  grid-column: 2;
  text-align: right;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin-right: 10px;
}

nav ul li a {
  color: #0a3351;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: 2.5vh;
  margin: 2.5vh;
}
section {
  padding-top: 22vh;
}

#testimonial_area {
  padding: 10% 0;
}
.box-area {
  padding: 30px;
  position: relative;
  display: block;
  background: #fff;
  color: #000;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin: 40px 0;
}
.box-area h5 {
  font-size: 16px;
  font-weight: 700;
  color: #0a69ed;
  margin-top: 30px;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.box-area span {
  color: #262626;
  display: block;
  font-size: 13px;
  margin: 0 0 10px;
  font-weight: 400;
}
.box-area .content {
  color: #262626;
}
.box-area .img-area {
  width: 90px;
  height: 90px;
  position: absolute;
  top: -40px;
  left: 0;
  bottom: 0;
  margin: 0 auto;
  right: 0;
  z-index: 1;
  border: 5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);
}
.box-area .img-area img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}
.socials {
  margin-top: 30px;
}
.socials i {
  margin: 0 10px;
  color: #0a69ed;
  font-size: 18px;
}
#testimonial_area .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
}
#testimonial_area .owl-prev,
#testimonial_area .owl-next {
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #0a69ed;
  border-radius: 50%;
  text-align: center;
  background: #fff;
  position: absolute;
}
#testimonial_area .owl-prev {
  left: -60px;
  top: -30px;
}
#testimonial_area .owl-next {
  right: -60px;
  top: -30px;
}
@media only screen and (max-width: 991px) {
  .owl-nav {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .box-area {
    text-align: center;
  }
  .owl-nav {
    display: none;
  }
}

CodePudding user response:

You have not set a z-index to the header. Just add z-idex:100; or something like that to the header tag it will be fixed.

CodePudding user response:

add this to your css code in header

header{z-index: 10;}

You should see lessons for the use of the Z-Index property in CSS3

  • Related