html – The text of the NAV bar overlaps when resizing the display.

At 100% zoom, my webpage looks great, but when I start zooming in, the text starts moving at an alarming rate instead of staying in place. I’ve tried to stabilize the position, then it messes with the whole thing and then the NAV bar stops sticking to the top. What am I doing wrong?

<!DOCTYPE html>
<html>
<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="Causes.html"><li>CAUSES</li></a>
                    </ul>
                </li>
            </ul>
        </nav>

header{
    background-image: url(banner1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #FACABC;
    background-position: center;
    display: block;
    position: relative;
}

h1{
    text-align: center;
    color: #FACABC;
    font-family: RedRock, "Times New Roman", sans-sarif;
    line-height: 5px;
}

.title{
    font-size: 500%;
}

h2{
    text-align: center;
    font-family: primer, "Times New Roman", sans-sarif;
    font-size: 200%;
    text-shadow: 1px 1px 2px #FACABC;
    color: #987b74;
}

#homelink{
    text-align: left;
    text-decoration: none;
    padding-left: 2%;
    font-size: 135%;
    font-family: RedRock, "Times New Roman", sans-sarif;
    color: #FACABC;
    text-shadow: 1px 1px 2px black;
}

ion-icon{
    padding-left: 6em;
    font-size: 41px;
    color: #987b74;
}

ion-icon:hover{
    color: #FACABC;
    transition: all 0.5s ease;
}

body{
    font-family: RedRock, "Times New Roman", sans-sarif;
    margin: 0;
}

.container{
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    background: #FACABC;
    z-index:1;
}

/* Nav bar*/
    
nav{

    z-index: 9999;
}

.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: '0bb';
  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;
} 

.video-trailer{
    background-image: radial-gradient(#f8f8f8, #FACABC, #f8f8f8);
}

main ul li{
    list-style-type: none;
    display: inline;
    padding-left: 2%;
    padding-right: 0%;
}

main h1{
    font-size: 60px;
}

footer{
    text-align: center;
    color: #987b74;
}

.backgroundcolor{ /* To get that cream color background!*/
    background-color: #f8f8f8;
}

table {
  font-family: primer, "Times New Roman", sans-sarif;
  color: #987b74;
  font-weight: bold;
  border-collapse: collapse;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

table td, table th {
  padding: 8px;
}

table tr:nth-child(even){
    background-color: #f2f2f2;
    }

table tr:hover {
    background-color: #f2f2f2;
}

table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  color: #987b74;
  font-size: 200%;
}

table td{
  border-top: 1px solid #987b74;
  border-bottom: 1px solid #987b74;
  border-right: 1px solid #987b74;
  text-align: center;
}

td:last-child{
    border-right: 0px;
}

.video-trailer h1{
    color: #987b74;
}
.video-trailer h2 a{
    color: #987b74;
}
.video-trailer h2 a:hover{
    color: #FACABC;
}

Add a Comment

Your email address will not be published. Required fields are marked *