Надеюсь, вы мне поможете, я делаю целевую страницу, которая очень отзывчива и прекрасно адаптируется к мобильным устройствам.Я хочу, чтобы в случае мобильных устройств навигационное меню охватывало весь экран.но я не смог этого добиться.Я хочу, чтобы при просмотре страницы на мобильных устройствах и нажатии кнопки переключения появлялось меню параметров, охватывающее весь экран, что-то вроде этого:
На изображении выше это меню, когда оно отображается, охватывает весь экран, как по ширине, так и по высоте.
На моей веб-странице этого не происходит, когда я нажимаю на кнопку переключения, чтобы отобразить меню, это так:
Как вы можете видеть, меню охватывает только половину экрана, и я хочу, чтобы, хотя у него было несколько вариантов,это все еще покрывает весь размер экрана.Как я мог этого добиться?С помощью CSS и, возможно, также JavaScript.
Это мой HTML-код:
<body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">
<!-- navigation section -->
<section class="navbar navbar-fixed-top custom-navbar bg-trans" role="navigation" id="navbar_menu">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<a class="nav-brand" href="index.php"><img src="images/nivaLogo.png" alt="logo" title="Nivamedia" id="main_logo"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="list_options">
<li><a href="index.php" class="smoothScroll itemLi">HOME</a></li>
<li class="dropdown">
<a class="dropdown-toggle itemLi" data-toggle="dropdown">LEISTUNGEN</a>
<ul class="dropdown-menu" id="dropdown-main" style="background-color: white; color: black;">
<li><a href="webdesign.php" class="itemUlLi">Webdesign & Entwicklung</a></li>
<li><a href="corporate-design.php" class="itemUlLi">Corporate Design</a></li>
<li><a href="online-marketing.php" class="itemUlLi">Online Marketing</a></li>
<li><a href="lieferdienst.php" class="itemUlLi">Lieferdienst Webshop</a></li>
</ul>
</li>
<li><a href="projekte.php" class="smoothScroll itemLi">PROJEKTE</a></li>
<li><a href="#about" class="smoothScroll itemLi">AGENTUR</a></li>
<li><a href="kontakt.php" class="smoothScroll itemLi">KONTAKT</a></li>
</ul>
</div>
</div>
</section>
</body>
Это мои CSS-запросы для медиа
@media (max-width: 767px) and (min-width: 320px)
{
.just_text
{
margin-left: 2px !important;
margin-right: 20px !important;
}
.title_left
{
text-align: center !important;
}
#main_logo
{
padding-top: 0px !important;
padding-bottom: 0px !important;
padding-left: 25px !important;
}
#navbar_menu
{
border-bottom: 0;
background: transparent; /*0 0*/;
}
/* #navbar_container
{
width: -webkit-fill-available !important;
height: -webkit-fill-available !important;
}
*/
#dropdown-main
{
background-color: white !important;
background: white !important;
padding-right: 0px !important;
}
.itemUlLi
{
color: black !important;
font-size: 18px !important;
}
#list_options
{
margin-top: 0px !important;
padding-top: 0px !important;
padding-bottom: 20px !important;
}
.itemLi
{
font-size: 20px !important;
}
.list_options_Li
{
padding-bottom: 30px !important;
}
.dropdown_li
{
padding-top: 15px !important;
}
#list_options
{
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}
#services_title div.section-title
{
padding-right: 11px !important;
padding-left: 11px !important;
}
#icon_mobile
{
display: inline-block !important;
}
#dropdown-main
{
padding-right: 0px !important;
margin-right: 0px !important;
padding-top: 15px !important;
width: 100% !important;
padding-left: 30px !important;
}
.navbar-toggle
{
margin-top: 20px !important;
margin-right: 25px !important;
}
.collapse.in
{
background-color: white !important;
position: relative !important;
top: 0 !important;
padding-left: 20px !important;
}
.collapse.in ul
{
background-color: white !important;
}
.collapse.in ul li a
{
color: black !important;
}
.off
{
display: none !important;
}
.display_line
{
display: block !important;
color: blue !important;
font-weight: bold !important;
width: 20% !important;
margin-left: 16px !important;
margin-right: 0px !important;
margin-top: 0% !important;
margin-bottom: 0% !important;
border-top: 2px solid blue !important;
text-align: left !important;
}
#menu_collapse
{ height: 100vh !important; }
} /* end of media queries */
Я использую загрузчик для дизайна.