Search code examples
htmlcssnavigationoverlapping

How to fix navbar when doing media queries

I am currently trying to optimize my website and am trying to tackle my navbar. I'm running into two issues:

  1. 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"

  2. 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/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/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>

Solution

  • 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/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/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>