C'est ma première fois de la création d'un site web pour un projet d'école ainsi de garder avec mon code désordre. Mon problème est que lorsque je scroll avec ma barre de navigation qui colle vers le haut et il croise sur mon bouton en Savoir Plus, le bouton chevauche sur la barre de navigation. Personne ne sait comment résoudre ce problème?
.container {
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
}
nav {
z-index: 9999;
}
/* Nav bar*/
.container nav {
width: 100%;
height: 76px;
font-size: 48px;
padding-left: 7em;
/* Centers "Home, About me, Socials, etc" text */
}
.container nav a {
text-align: center;
text-decoration: none;
color: #987b74;
padding-right: 100px;
}
.container nav ul {
width: 100%;
height: 100%;
margin: 0 auto;
list-style-type: none;
transition: all 0.5s ease;
}
.container nav ul li {
width: 10%;
float: left;
text-align: center;
color: #987b74;
font-size: 41px;
font-weight: bold;
transition: all 0.5s ease;
position: sticky;
cursor: pointer;
top: 0;
}
.container nav ul li:hover {
color: #5E4C47;
}
.container nav ul li ul.sub-nav {
position: absolute;
background: white;
/* Background of drop down */
width: 75%;
height: 110px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.14), -1px 0px 1px rgba(0, 0, 0, 0.14);
top: 75px;
left: 0;
visibility: hidden;
opacity: 0;
}
.container nav ul li ul.sub-nav li {
font-size: 31px;
font-family: primer, "Times New Roman", sans-sarif;
width: 75%;
}
.container nav ul li:hover ul.sub-nav
/* Drop down menu visibility */
{
visibility: visible;
opacity: 75%;
margin-top: 2px;
}
.container li {
display: inline-block;
}
.container nav ul li ul.sub-nav a:hover {
color: #5E4C47;
transition: all 0.5s ease;
}
.container nav ul li ul.sub-nav a {
padding: 0;
}
main h2 {
padding-right: 10em;
padding-left: 10em;
}
main .learn-more {
border-radius: 2px;
background-color: #FACABC;
border: none;
color: #987b74;
text-align: center;
font-size: 28px;
padding: 20px;
width: 275px;
transition: all 0.5s;
cursor: pointer;
margin: 0;
position: absolute;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: primer, "Times New Roman", sans-sarif;
}
main .learn-more span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
main .learn-more span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
main .learn-more:hover span {
padding-right: 25px;
}
main .learn-more:hover span:after {
opacity: 1;
right: 0;
}
<div id="wrapper">
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<header>
<a id="homelink" href="index.html">
<h2 id="homelink">HighItsKy</h2>
</a>
<br><br><br>
<br>
<span class="title"><h1>HighItsKy</h1></span>
<h2>part time streamer, full time vibe</h2>
<br><br>
<a href="https://www.twitch.tv/highitsky/" target="_blank">
<ion-icon name="logo-twitch"></ion-icon>
</a>
<a href="https://discord.gg/M2umXEhkNq" target="_blank">
<ion-icon name="logo-discord"></ion-icon>
</a>
<a href="https://youtube.com/highitsky" target="_blank">
<ion-icon name="logo-youtube"></ion-icon>
</a>
<a href="https://www.instagram.com/highitsky_/" target="_blank">
<ion-icon name="logo-instagram"></ion-icon>
</a>
<a href="https://www.tiktok.com/@highitsky" target="_blank">
<ion-icon name="logo-tiktok"></ion-icon>
</a>
<a href="https://www.twitter.com/highitsky_/" target="_blank">
<ion-icon name="logo-twitter"></ion-icon>
</a>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<br><br><br><br><br>
</header>
<div class="container">
<nav>
<ul>
<a href="index.html">
<li>Home</li>
</a>
<li>About Me
<ul class="sub-nav">
<a href="AboutMe.html">
<li>ABOUT</li>
</a>
<a href="Cloves.html">
<li>CLOVES</li>
</a>
</ul>
</li>
<li>Socials
<ul class="sub-nav">
<a href="Socials.html">
<li>SOCIALS</li>
</a>
<a href="Contact.html">
<li>CONTACT</li>
</a>
</ul>
</li>
<a href="Community.html">
<li>Community</li>
</a>
<a href="Partnerships.html">
<li>Partnerships</li>
</a>
<li>Support
<ul class="sub-nav">
<a href="Donate.html">
<li>DONATE</li>
</a>
<a href="Merch.html">
<li>MERCH</li>
</a>
<a href="Organizations.html">
<li>OTHER</li>
</a>
</ul>
</li>
</ul>
</nav>
<div class="header"></div>
</div>
<main>
<div class="backgroundcolor">
<br><br>
<h1>High, I'm Ky
<h1><br>
<h2>I started streaming on . . . </h2>
<br>
<a href="AboutMe.html"><button class="learn-more"><span>LEARN MORE </span></button></a>
<br><br><br><br><br>
</div>
<div class="video-trailer">
<br><br>
<h2>My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...</h2>
<br><br>
<center>
<video controls="controls" height="64%" width="62%" style='border: 2px solid #FACABC;'>
<source src="trailer.mp4" type="video/mp4">
</video>
<br><br>
<h2>what matters is that I get to spend time with the people that I love; my community!</h2>
<br><br>
</div>
<div class="backgroundcolor">
<br><br>
<h1>High-lights</h1>
<br><br>
<hr size="2" color="#987b74">
<br><br>
<ul>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<br><br>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
<li>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</li>
</ul>
<br><br>
<hr size="2" color="#987b74">
<footer>HighItsKy © 2020 </footer>
</div>
</main>