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 class="logo-container">
<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" class="section_padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="testmonial_slider_area text-center owl-carousel">
<div class="box-area">
<div class="img-area">
<img src="img/2.jpg" alt="" />
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
"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 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<!-- END SINGLE TESTIMONIALS -->
<div class="box-area">
<div class="img-area">
<img src="img/3.jpg" alt="" />
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
"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 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<!-- END SINGLE TESTIMONIALS -->
<div class="box-area">
<div class="img-area">
<img src="img/4.jpg" alt="" />
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
"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 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<!-- END SINGLE TESTIMONIALS -->
<div class="box-area">
<div class="img-area">
<img src="img/5.jpg" alt="" />
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
"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 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</h6>
</div>
<!-- END SINGLE TESTIMONIALS -->
<div class="box-area">
<div class="img-area">
<img src="img/6.jpg" alt="" />
</div>
<h5>Person's name</h5>
<span>Designation Goes Here</span>
<p class="content">
"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 class="socials">
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></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 class="fa fa-arrow-left"></i>',
'<i class="fa fa-arrow-right"></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 class="fa fa-arrow-left"></i>',
'<i class="fa fa-arrow-right"></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;
}
}
2
Answers
You have not set a z-index to the header.
Just add
z-idex:100;or something like that to theheadertag it will be fixed.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