Snažila jsem se vytvořit navigační lišty, a to vše jde dobře až na jeden problém, který se objeví, když je šířka okna je mezi 768px a 922px jako obsah uvnitř navigační prvek dostane mimo jeho obal z pravé strany .Zkoušel jsem mnoho řešení, ale žádné z nich nefungovalo ,a ani neznám příčinu problému.
<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........>>>>>>> */