#html #css
Вопрос:
Я пытался написать заголовок страницы с видео в качестве фона. Навигационные ссылки доступны, если размер экрана превышает 1200 пикселей. Но строка меню не отображается, если размер экрана меньше 1200 пикселей. Как исправить невидимую строку меню?
Это html-код, который включает видео в качестве фона и соответствующие навигационные ссылки. Также вставляются строки меню и значки времени.
nav { display: flex; padding: 2% 6%; justify-content: space-between; } nav img { width: 140px; position: relative; } .nav-links { flex: 1; text-align: right; } .nav-links ul li { list-style: none; display: inline-block; padding: 20px 15px; position: relative; } .nav-links ul li a { color: #fff; text-decoration: none; font-size: 14px; } .header video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } nav .fa { display: none; } @media (max-width: 1200px) { .nav-links ul li { display: block; padding: 15px 10px; } .nav-links { position: absolute; background: #fff; height: 100vh; width: 200px; top: 0; right: -200px; text-align: left; z-index: 2; transition: 1s; } nav .fa { display: block; cursor: pointer; margin: 10px; font-size: 24px; } } lt;section class="header"gt; lt;video src="images/Helicopters9.mp4" muted loop autoplaygt;lt;/videogt; lt;navgt; lt;a href="Home.html"gt;lt;img src="images/logo.png" alt="helicopter" /gt;lt;/agt; lt;div class="nav-links" id="navlinks"gt; lt;i class="fa fa-times" onclick="hideMenu()"gt;lt;/igt; lt;ulgt; lt;ligt;lt;a href="HOME.html"gt;HOMElt;/agt;lt;/ligt; lt;ligt;lt;a href="FAQs.html"gt;FAQlt;/agt;lt;/ligt; lt;ligt;lt;a href="MemberArea.html"gt;MEMBER AREAlt;/agt;lt;/ligt; lt;ligt;lt;a href="CommunityGroup.html"gt;COMMUNITY GROUPlt;/agt;lt;/ligt; lt;ligt;lt;a href="PlacesToFly.html"gt;LATEST PLACES TO FLYlt;/agt;lt;/ligt; lt;ligt;lt;a href="TrainingOnline.html"gt;TRANING ONLINElt;/agt;lt;/ligt; lt;ligt;lt;a href="Review.html"gt;REVIEWlt;/agt;lt;/ligt; lt;/ulgt; lt;i class="fa fa-bars" onclick="showMenu()"gt;lt;/igt; lt;/divgt; lt;/navgt; lt;/sectiongt; Ответ №1:
Ваш menu тоже виден на 1200ox экранах меньшего размера. Просто измените background-color ссылку так, чтобы на ней был виден белый цвет, или измените color цвет, отличный от белого.
На меньшем экране создается полоса прокрутки, и вы menu выравниваетесь по большей части экрана справа
nav { display: flex; padding: 2% 6%; justify-content: space-between; } nav img { width: 140px; position: relative; } .nav-links { flex: 1; text-align: right; } .nav-links ul li { list-style: none; display: inline-block; padding: 20px 15px; position: relative; } .nav-links ul li a { color: red; text-decoration: none; font-size: 14px; } .header video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } nav .fa { display: none; } @media (max-width: 1200px) { .nav-links ul li { display: block; padding: 15px 10px; } .nav-links { position: absolute; background: #fff; height: 100vh; width: 200px; top: 0; right: -200px; text-align: left; z-index: 2; transition: 1s; } nav .fa { display: block; cursor: pointer; margin: 10px; font-size: 24px; } } lt;section class="header"gt; lt;video src="images/Helicopters9.mp4" muted loop autoplaygt;lt;/videogt; lt;navgt; lt;a href="Home.html"gt;lt;img src="images/logo.png" alt="helicopter" /gt;lt;/agt; lt;div class="nav-links" id="navlinks"gt; lt;i class="fa fa-times" onclick="hideMenu()"gt;lt;/igt; lt;ulgt; lt;ligt;lt;a href="HOME.html"gt;HOMElt;/agt;lt;/ligt; lt;ligt;lt;a href="FAQs.html"gt;FAQlt;/agt;lt;/ligt; lt;ligt;lt;a href="MemberArea.html"gt;MEMBER AREAlt;/agt;lt;/ligt; lt;ligt;lt;a href="CommunityGroup.html"gt;COMMUNITY GROUPlt;/agt;lt;/ligt; lt;ligt;lt;a href="PlacesToFly.html"gt;LATEST PLACES TO FLYlt;/agt;lt;/ligt; lt;ligt;lt;a href="TrainingOnline.html"gt;TRANING ONLINElt;/agt;lt;/ligt; lt;ligt;lt;a href="Review.html"gt;REVIEWlt;/agt;lt;/ligt; lt;/ulgt; lt;i class="fa fa-bars" onclick="showMenu()"gt;lt;/igt; lt;/divgt; lt;/navgt; lt;/sectiongt; Комментарии:
1. Это не сработает. Фоном является видео, поэтому значок в строке меню должен быть виден, даже если он белый. Значки не отображаются, когда сайт находится в полноэкранном режиме. Когда экран меньше 1200 пикселей, значки должны отображаться так, как написано в @media.
2. Прокрутите вправо, и вы найдете значок своего меню в приведенном выше фрагменте @Meranda . Возможно, ваше видео не распространяется ниже всех значков на маленьком экране . Попробуйте изменить цвет и прокрутите вправо