进行媒体查询时如何修复导航栏
How to fix navbar when doing media queries
我目前正在尝试优化我的网站并尝试解决我的导航栏问题。我 运行 有两个问题：
在 100% 缩放（正常缩放）时，一切看起来都很棒，但是当我尝试缩放到比方说 250% 时，最右边的文本及其相应的下拉菜单开始消失菜单。因此，我只看到“Suppo”而不是完整的“Support”
我的下拉菜单也有问题。我想让文本居中，但是如果我添加 text-align: center; 它不会做任何事情。此外，当我放大时，文本也开始从下拉菜单背景中突出，这非常令人沮丧。
.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>
请查看我对您的 media queries 所做的调整 使您的文字保持一致的主要内容是 align-items: flex-start; 我添加的其他内容旨在稍微清理一下。显然，您可以随意更改，但这应该有所帮助。
.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>
我目前正在尝试优化我的网站并尝试解决我的导航栏问题。我 运行 有两个问题：
在 100% 缩放（正常缩放）时，一切看起来都很棒，但是当我尝试缩放到比方说 250% 时，最右边的文本及其相应的下拉菜单开始消失菜单。因此，我只看到“Suppo”而不是完整的“Support”
我的下拉菜单也有问题。我想让文本居中，但是如果我添加 text-align: center; 它不会做任何事情。此外，当我放大时，文本也开始从下拉菜单背景中突出，这非常令人沮丧。
.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>
请查看我对您的 media queries 所做的调整 使您的文字保持一致的主要内容是 align-items: flex-start; 我添加的其他内容旨在稍微清理一下。显然，您可以随意更改，但这应该有所帮助。
.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>