When scrolling, the website content is overlapping the navigation bar, and I am unsure how to resolve it. Here is the HTML code:
<body>
<header>
<p class="logo">גכשד יחכי</p>
<nav>
<ul class="nav_links">
<li><a href="#">אודות</a></li>
<li><a href="#">שירותים</a></li>
<li><a href="#">פרוייקטים</a></li>
</ul>
</nav>
<a class="cta" href="https://support.microsoft.com/he-il/contactus/"><button>צור קשר</button></a>
</header>
<div class="intro"></div>
<main>
<h1 class="main-text">פסיכולוגית<br /> חינוכית</h1>
<p class="secendery-text">חשדג גשחכי היא פסיכולוגית חינוכית<br /> העוסקת במקצוע זה למעלה מ20 שנה <br /></p>
<img src="images/psychology1.png" alt="" class="side-image" />
</main>
<div class="card">
<img src="images/img_avatar.png" alt="Avatar" >
<div class="container">
<h4><b>b</b></h4>
<p> </p>
</div>
</div>
</body>
</html>
The following CSS code might be related to the problem:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li, a, button {
font-family: 'Rubik', sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
color: #edf0f1;
}
header {
display: flex;
background-color: #24252A;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
position: fixed;
top: 0;
width: 100%;
}
.nav_links {
list-style: none;
display: flex;
}
nav{
order:2;
}
.cta{
order:1;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
color:#ddad34;
}
.main-text {
font-family: 'Rubik', sans-serif;
margin: 0;
padding: 0;
position:absolute;
top: 32%;
right: 25%;
direction: rtl;
font-size: 60px;
color: black;
}
.secendery-text {
font-family: 'Rubik', sans-serif;
margin: 0;
padding: 0;
position: absolute;
top: 48%;
right: 25%;
direction: rtl;
color: darkgray;
}
.side-image {
position: absolute;
top: 20%;
left: 5%;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}
.
If anyone knows how to fix this issue, please provide assistance. Thank you!