Am fost încercarea de a crea o bara de navigare și totul merge bine, cu excepția o problemă care apare atunci când lățimea ferestrei este între 768px și 922px ca conținutul în interiorul nav element devine afară din recipientul de pe partea dreapta .Am încercat mai multe soluții, dar niciuna n-a mers ,si nici nu stiu cauza problemei.
<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........>>>>>>> */