I am currently trying to optimize my website and am trying to tackle my navbar. I'm running into two issues:
At 100% zoom (normal zoom), everything looks great, but when I try and zoom to let's say 250%, the text on the furthest right starts to disappear as well as its corresponding dropdown menu. Thus, I just see "Suppo" and not the full word "Support"
I'm having issues with my dropdown as well. I want to make the text centered, but it won't do anything if I add text-align: center;. Additionally, when I zoom in, the text begins to jut out of the drop-down menu background too which is quite frustrating.
.container{
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
z-index:1;
}
/* Nav bar*/
.container nav{
width: 100%;
height: 76px;
}
.container nav a{
text-align: center;
text-decoration: none;
color: #987b74;
}
.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; /*keep this!! */
background-color: #FACABC; /* Background of drop down */
width: 100%;
height: auto;
box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14); /*Border around dropdown*/
top: 74px;
visibility: hidden;
opacity: 0;
}
.container nav ul li ul.sub-nav li{
font-size: 31px;
font-family: primer, "Times New Roman", sans-sarif;
width: auto;
}
.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;
}
.tabs {
display: flex;
justify-content: space-around;
}
@media screen and (max-width: 640px)
{
body, html{
overflow-x: hidden;
padding: 0.8em 0;
width: 100vw;
}
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
.tabs{
flex-direction: column;
align-items: center;
}
h2{font-size: 100%;}
.title{
font-size: 250%;
}
}
@media (max-width: 1200px) {
.container nav ul li {font-size: 25px;}
}
<!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>
<div class="alignicons">
<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>
</div>
<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 class="tabs">
<a href="index.html">
<li>Home</li>
</a>
<li style="white-space: nowrap;">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>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Please see the adjustments I made to your media queries
The main thing that aligned your words together was align-items: flex-start;
The other stuff I added was intended to clean it up a bit. Obviously, feel free to change around as you desire, but this should help.
.container{
position: sticky;
top: 0;
position: -webkit-sticky;
background: #FACABC;
z-index:1;
}
/* Nav bar*/
.container nav{
width: 100%;
height: 76px;
}
.container nav a{
text-align: center;
text-decoration: none;
color: #987b74;
}
.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; /*keep this!! */
background-color: #FACABC; /* Background of drop down */
width: 100%;
height: auto;
box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14); /*Border around dropdown*/
top: 74px;
visibility: hidden;
opacity: 0;
}
.container nav ul li ul.sub-nav li{
font-size: 31px;
font-family: primer, "Times New Roman", sans-sarif;
width: auto;
}
.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;
}
.tabs {
display: flex;
justify-content: space-around;
}
@media only screen and (max-width: 640px)
{
body, html{
overflow-x: hidden;
padding: 0.8em 0;
width: 100vw;
}
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
.tabs{
flex-direction: column;
align-items: flex-start;
}
h2{font-size: 100%;}
.title{
font-size: 250%;
}
.container {
height: 180px;
width: 100%;
display: flex;
align-items: center;
}
}
@media only screen and (max-width: 800px) {
.container nav ul li {
font-size: 25px;
width: fit-content;
height: fit-content;
}
}
<!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>
<div class="alignicons">
<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>
</div>
<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 class="tabs">
<a href="index.html">
<li>Home</li>
</a>
<li style="white-space: nowrap;">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>
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>