Как вы решаете проблему наложения основного содержимого на адаптивную панель навигации, созданную с использованием HTML, CSS и JavaScript?

avatar
Roshan Daniel
9 августа 2021 в 05:53
82
1
0

Код панели навигации На самом деле я взял его с канала YouTube Dev Ed (ссылка на видео: https://youtu.be/gXkqy0b4M5g), который на самом деле хорошо объяснил все сложные структуры CSS. как @media и т. д., а также помогли мне успешно создать панель навигации. Однако содержимое, которое я помещаю в тело, продолжает перекрывать панель навигации. Кто-нибудь может помочь мне с этой проблемой?

HTML-код:

const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
//togle nav
burger.addEventListener('click', () => {
  nav.classList.toggle('nav-active');
  
  navLinks.forEach((link, index) => {
    if (link.style.animation) {
      link.style.animation = '';
    } else {
      link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + .3}s`;
    }
  });
  
  burger.classList.toggle('toggle');
});
  }
  
  navSlide();
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
background-color: #2c7aaf;
}

nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #3c3c5c; 
font-family: 'Poppins', sans-serif;

}

.logo{
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}

.nav-links{
display: flex;
justify-content: space-around;
}
.nav-links li{
list-style: none;
padding: 10% 10% 10% 10%;
}

.nav-links a{
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bolder;
font-size: 14px;
}

.burger{
display: none;
cursor: pointer;
}

.burger div{
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
}
.landing {
width: 1336px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
  }
  
  .landing h1 {
text-align: center;
font-size: 70px;
font-family: 'Fira Sans', sans-serif;
font-style: italic;
line-height: 90%;
padding-bottom: 20px;
  }
  
  .landing p {
text-align: center;
font-size: 18px;
font-family: 'montserrat', sans-serif;
padding-left: 15%;
padding-right: 15%;
line-height: 1.6;
  }

@media screen and (max-width:1024px){}

@media screen and (max-width:768px){
body{
    overflow-x: hidden;
}
.nav-links{
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #3c3c5c;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;

}

.nav-links li{
    opacity: 0;
}

.burger{
    display: block;
}
}

.nav-active{
transform: translateX(0%);
}

@keyframes navLinkFade{
from{
    opacity: 0;
    transform: translateX(50px);
}
to{
    opacity: 1;
    transform: translateX(0px);
}
}

.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
  }
  
  .toggle .line2 {
opacity: 0;
  }
  
  .toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
  }
  
.welcome{
background: red;
width: 100%;
height: auto;
color: rgb(226, 226, 226);
text-align: center;
font-size: 50px;
font-family: poppins;
font-weight: 800px;
text-decoration: underline;
}

.last-Vid{
font-size: 40px;
color: azure;
padding-top: 20px;
padding-left: 50px;
}

.vid{
   position: relative;
   margin-left: 390px;
}

*{
margin: 0;
padding: 0;
}

.uploads{
background: rgb(66, 0, 128);
width: 100%;
height: auto;
color: rgb(226, 226, 226);
text-align: center;
font-size: 50px;
font-family: poppins;
font-weight: 800px;
padding-bottom: 20px ;
}

.last-CVid{
position: absolute;
font-size: 40px;
color: azure;
padding-top: 20px;
padding-left: 50px;
margin-left: 20px;
z-index: inherit -10; ;
}

.Cvid{
   position: relative;
   margin-left: 50px;
   margin-top: 10px;
}
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">
    <title>
        Welcome!!
    </title>
    <link href="welcomStyle.css" rel="stylesheet" type="text/css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
</head>
<body>
    <nav>
        <div class="logo">
            <h4>
                T0rquid                          
            </h4>
        </div>
        <ul class="nav-links">
            <li><a href="Welcome.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="vidoes.html">Videos</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>
    <h1 class="welcome">
        Welcome!! 
    </h1>
    <h1 class="last-Vid">
        Watch last video here:<br><br>
        <iframe width="560" height="315" class="vid" src="https://www.youtube.com/embed/DfQBmMqm0Og" 
        title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </h1>
</body>
<script src="app.js"></script>
</html>
Источник

Ответы (1)

avatar
Roi
9 августа 2021 в 07:44
0

Похоже, удаление position: relative; из .vid помогло.

Я не понимаю, почему это необходимо, но если это так, пожалуйста, прокомментируйте и объясните, и я попытаюсь найти другое творческое решение.

Roshan Daniel
10 августа 2021 в 07:43
0

Дуууууде. Спасибо большое. Да, это сработало. Я не могу поверить, что это маленькое заявление было ошибкой. Большое спасибо, чувак.

Roshan Daniel
10 августа 2021 в 08:42
0

Также есть ли способ, которым я мог бы уменьшить содержимое тела? На данный момент отзывчивая панель навигации перекрывает половину первого видео. Сначала я просто увеличил ширину панели навигации до 100%, но теперь мне стало любопытно, как заставить этот контент опускаться...

Roi
10 августа 2021 в 20:14
0

@RoshanDaniel Что ты имеешь в виду, говоря об этом? Мы говорим о горизонтальной панели навигации на полной странице или когда вы открываете вертикальную панель на мобильном телефоне? Во фрагменте я вижу только одно видео и заголовок. Кроме того, если ответ был полезен, было бы полезно принять его как ответ.