Блог

Главная - Вопросы по программированию - Как исправить навигационную панель при выполнении медиа-запросов

Как исправить навигационную панель при выполнении медиа-запросов

#html #css #navigation #overlapping

Вопрос:

В настоящее время я пытаюсь оптимизировать свой веб-сайт и пытаюсь решить свою навигационную панель. Я сталкиваюсь с двумя проблемами:

  1. При 100% увеличении (обычном увеличении) все выглядит великолепно, но когда я пытаюсь увеличить, скажем, до 250%, текст в самом дальнем правом углу начинает исчезать, а также соответствующее выпадающее меню. Таким образом, я вижу только «Suppo», а не полное слово «Поддержка».
  2. У меня тоже возникли проблемы с моим выпадающим списком. Я хочу сделать текст центрированным, но это ничего не даст, если я добавлю выравнивание текста: по центру;. Кроме того, когда я увеличиваю масштаб, текст тоже начинает выступать из фона раскрывающегося меню, что довольно неприятно.
 .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>

Ответ №1:

Пожалуйста, ознакомьтесь с изменениями, которые я внес в ваш 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>
Метки: