Bir gezinme çubuğu oluşturmaya çalışıyordum ve gezinme öğesinin içindeki içerik sağ taraftaki kapsayıcısının dışına çıktıkça pencere genişliği 768px ile 922px arasında olduğunda görünen bir sorun dışında her şey yolunda gidiyor .Birçok çözüm denedim, ancak hiçbiri işe yaramadı ve sorunun nedenini bile bilmiyorum.
<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>test Website</title>
<!-- font awesome -->
<script src="https://kit.fontawesome.com/3e0066cf06.js" crossorigin="anonymous"></script>
<!-- font awesome -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="first">
<div class="container">
<h1>Test Website</h1>
<nav>
<i class="fas fa-bars fa-3x menu"></i>
<ul>
<li><a href="" class="active">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Help</a></li>
</ul>
<div class="search">
<i class="fas fa-search fa-3x"></i>
</div>
</nav>
</div>
<div class="slider">
<div class="content-text">
<h2> Who are we?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
@import url('https://fonts.googl-3eapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');
*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
html{
font-family: Montserrat;
font-size: 10px;
scroll-behavior: smooth;
}
ul{
list-style: none;
}
/* global frameWork */
.container {
padding-left: 15px;
padding-right: 15px;
margin-inline: auto;
position: relative;
min-height: 115.59px;
}
/* Small */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium */
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
@media (min-width: 1200px) {
.container {
min-width: 1170px;
}
}
/* End Global Rules */
/* Start Components */
@media (max-width: 767px) {
}
.first{
min-height: 100vh;
position: absolute;
min-width: 100%;
}
.first::after{
content: "";
position: absolute;
min-height: 100vh;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.5)),url(images/evgeni-tcherkasski-SHA85I0G8K4-unsplash.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
}
.container{
display: flex;
justify-content: space-between;
align-items: center;
color: white;
/* position: relative; */
}
nav{
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
}
.container::after{
content: "";
position: absolute;
width: calc(100% - 30px);
height: 5px;
background-color: white;
left: 15px;
right: 15px;
bottom:14px;
}
nav ul{
display: flex;
}
nav ul li a{
display: block;
color: white;
text-decoration: none;
font-size: 2rem;
padding: 30px 40px;
transition: all .2 ease-in-out;
position: relative;
z-index: 2;
}
nav .search{
color: white;
width: 50px;
height: 70px;
margin-left: 30px;
position: relative;
border-left: 3px solid white;
}
nav .search i{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
nav ul li a.active,
nav ul li :hover{
color: #19c8fa;
border-bottom: 5px solid #19c8fa;
}
/* <.........ressponsive Navbar........>>>>>>> */
@media (min-width: 767px) {
nav .menu{
display: none;
}
}
@media (max-width: 768px) {
nav ul{
display: none;
}
nav ul.clicked{
display: flex;
flex-direction: column;
position: fixed;
width: 100%;
top: 20%;
left: 0;
background-color: rgba(0,0,0,.3);
}
}
.slider{
display: flex;
flex-direction: row;
justify-content: flex-end;
color: white;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color:#19c8fa ;
height: 250px;
width: 600px;
}
.content-text{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50px;
}
.content-text h2{
font-size: 3rem;
font-weight: bold;
margin-bottom:5px ;
}
.content-text p{
font-size: 1.5rem;
line-height: 20px;
text-transform: uppercase;
}
/* <.........ressponsive Navbar........>>>>>>> */